Little Boxes – der HTML-Crashkurs

Favicons als Minilogos für Webseiten nutzen

29,95
Das Favorites Icon, kurz Favicon, ist ein nützliches Phänomen. Sehen Sie in diesem Video, wie diese kleinen Kunstwerke Ihren Seiten ein Stück Identität verleihen.

Viele Websites haben kleine Mini-Logos, die ihnen ein Stück weit Identität geben. Sie sehen hier oben ein paar Beispiele, das grün-schwarze hier, etwas bunter und hier sogar ein kleines Bild. Diese Dinger tauchen überall wieder auf beim Setzen von Favoriten und hier in den Tabs. Die geben ein Stück Identität, wie gesagt, und sie nennen sich Favicons. Das ist kurz für Favorites Icon, favorite- die Bezeichnung im Internet Explorer für Lesezeichen. Und die Dinger wurden dann auch im Internet Explorer 5 eingeführt und erfreuen sich inzwischen allgemeiner Beliebtheit. Das zu erstellen und einzubinden ist relativ simpel, deswegen möchte ich Ihnen eben kurz zeigen, wie so etwas gehen könnte. Eine Website, die dabei hilft, eine klassische Website, die das seit vielen Jahren tut, ist der Favicon Generator auf der Website mit der Adresse antifavicon.com. Hier oben sehen Sie ein paar einfache Beispiele. Hier ist das, was wir im Augenblick zusammenbauen, was dann hier anschließend gespeichert werden kann. Ich lösche erstmal den Text und Sie sehen oben ist er dann auch schon weg. Da nehme ich hier noch ein paar andere Farben. f3c600, so ein Gelbton. Den können Sie auch gerne mit der Pippette Farben auswählen. Und unten drunter soll so ein Grauton sein, so ein heller Grauton, ein d zu viel. So, das tut's und schon ist hier oben gelb und grau. Das Ganze wird jetzt abgespeichert. Save unter dem Namen favicon.ico. Das ist der Dateiname für ein typisches Favicon im Ordner littleboxes. Speichern, tzak, da ist er drin. und jetzt gehe ich rüber in den Editor und mache ein bisschen Platz im head der Seite und binde dieses Favicon ein. Dazu gibt's einen Befehl, der heißt link. Und der hat verschiedene Attribute, link erstellt also keine Hyperlinks, sondern macht diverse andere Dinge. Er verknüpft diese Webseite mit diversen Resourcen. Eine davon rel="shortcut icon" Das ist die Beziehung, die die verknüpfte Datei zu dieser Webseite hat, die Relation rel. Und jetzt kommt der Speicherort, die Wegbeschreibung dorthin. Die liegt im selben Ordner und heißt favicon.ico. Speichern. link rel="shortcut icon" Das ist die Beziehung, die diese Datei zu dieser Webseite hat. favicon.ico also im selben Ordner. Gespeichert ist, rüber in den Browser, leichten Trommelwirbel ansetzen, neu laden und wups, da ist er. Das ist unser favicon in einer simplen Form. Es muss gar nicht so aufwändig sein. Es dient hauptsächlich auch zur Wiedererkennung. So, andere Möglichkeiten, so ein favicon zu erstellen, ist hier der favicon.cc Gerenerator. Hier kann man selber malen. Sie sehen schon, das ist etwas aufwändiger. Wenn man malen kann, kann man hier sehr schöne Kreationen erstellen. Und der Hammerhit unter dem favicon Generator ist der Real Favicon Generator.net. Der erstellt nämlich nicht nur diese kleinen Favicons, sondern der kümmert sich auch gleich noch um Homescreens, auf iOS und Android-Geräten, der macht Carreln für Windows 8 und in der Windows-Taskbar unten. So sieht das hier aus. Diese generiert er. Dafür braucht man nun aber auch etwas größere Bilder, submit a sqare picture, at least 70x70 px, und sollte für die besten Ergebnisse, weil diese Symbole auf dem Homescreen etwas größer, mindestens 260x260 sein und quadratisch, square. Wenn Sie so was haben, dann können Sie das hier einfach hochladen und der generiert das für Sie. Und hier zeige ich Ihnen einmal ein Beispiel. Der sieht das so. Und hier gibt es jetzt für alle möglichen Umstände Favorite Icons. Das ist dann aber auch schon etwas aufwändiger. Für den Moment reicht hier so ein simples, kleines Icon völlig aus.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!