Favicon selbst erstellen
Was ist ein Favicon?
Favicons sind kleine Grafiken, die in der Adresszeile des Browsers angezeigt werden, wenn eine Webseite geladen wird. Auch wenn im Browser ein Link als Favorit abgelegt wird, zeigt der Eintrag das Favicon anstelle des Standard-Symbols.
Favicons können Logos, Buchstaben oder einfach Farben enthalten und bieten somit die Möglichkeit, der eigenen Internet-Adresse einen visuellen Anker zu geben – Menschen merken sich abstrakte Informationen wie z.B. eine Internetadresse viel leichter, wenn ein visueller Eindruck damit verbunden ist.
Ein Beispiel (aus diesem Blog):
Wie kann man ein Favicon selbst erstellen?
- Mit einem Programm wie Photoshop, PhotoImpact oder PaintShop Pro eine Grafik mit 16×16 Pixeln erstellen. Theoretisch reicht auch ein Tool wie MS Paint (Zubehör jeder Windows-Installation).
- Einige Seite geben an, dass maximal 16 Farben verwendet werden sollten, bei anderen ist von 256 die Rede – ich habe es mit „TrueColor“ (16,7 Mio. Farben) versucht, und es funktioniert wunderbar.
- Einige Programme bieten eine Option an, eine Grafik direkt als .ICO-Datei zu speichern. Wenn das nicht geht, benötigt man das Freeware-Programm IconShop. Man speichert zunächst die Grafik als .GIF oder .BMP Datei und öffnet diese anschließend mit IconShop. Danach kann man sie via File -> Export as -> Icon als favicon.ico-Datei speichern.
Wie bindet man ein Favicon in die eigene Webseite ein?
Für die Einbindung in die Webseite gibt es zwei Möglichkeiten:
- Die einfachere Variante: die Datei favicon.ico in das Root-Verzeichnis der Webseite hochladen. Die meisten Browser erkennen diese Datei automatisch beim Aufruf einer Webseite und laden das Favicon gleich mit.
- Die etwas kompliziertere Variante: diesmal ist es nicht zwingend erforderlich, dass die Datei favicon.ico heißt – sie könnte auch meinicon.ico oder irgendwie anders benannt werden. Diese Datei wird ebenfalls in das Root-Verzeichnis des Webservers hochgeladen.
Nun muss man dasjenige Dokument ausfindig machen, welches beim Laden der Webseite vom Browser aufgerufen wird. Oft ist dies eine HTML-Datei, z.B. index.html.
Manchmal handelt es sich aber auch um eine .PHP-Datei, z.B. dann, wenn ein Content-Management-System oder eine Blogsoftware eingesetzt wird. Diese Startdateien heissen häufig index.php oder ähnlich, müssen aber nicht zwingend im Root-Verzeichnis des Webservers liegen.
In den Header der jeweiligen Startdatei fügt man nun folgenden Code ein:
Der Header ist der Bereich zwischen den Tags und .
Das Favicon ist nun einsatzbereit und wird vom Browser sowohl in der Adresszeile links neben der Adresse und in den Favoriten angezeigt werden. Manchmal kann es vorkommen, dass der Cache des Browsers gelöscht werden muss bzw. ein Favorit gelöscht und neu angelegt werden muss, damit das Favicon sichtbar wird.
Weitere Links zum Thema
