Favicons richtig erstellen

21 Juli 2010
Armin Göpfert

Favicons sind kleine Grafiken (üblicherweise Logos), die meistens 16×16 Pixel groß sind und im Webbrowser vor der eigentlichen Webadresse (URL) stehen. Diese dienen dazu, einer Webseite das gewisse „Etwas“ zu verleihen. Setzt man die kleinen Grafiken ein, bietet man den Besuchern der Webseite ein Wiedererkennungszeichen, welches das Branding des Unternehmens und der Marke steigert. Fügt man eine Webseite den Favoriten hinzu, wird das Favicon auch in der Favoritenliste als Grafik angezeigt.

In vielen Fällen werden von Screen Designern etliche Versuche unternommen, die kleinen Grafiken in eine Webseite einzubinden. Oft werden diese dann nicht angezeigt, weil die Favicons falsch eingebunden werden oder die Grafiken nicht richtig angelegt sind. In diesem kleinen Tutorial zeige ich Ihnen auf was man achten muss, damit die Favicons in gebräuchlichen Browsern angezeigt werden.

1. Beim Erstellen der kleinen Grafiken sollte man darauf achten, dass man die Grafiken in einer Farbtiefe von maximal 16 Farben anlegt, bei einer Auflösung von 72 DPI.

2. Als Dateiendung wählt man .ico (Windows Icon). Diese Endung ist sehr gebräuchlich und wird meistens für die Einbindung der kleinen Garfiken verwendet. Das Herstellen einer .ico Datei kann nicht jede Software leisten, dazu empfehle ich das Programm IrfanView (Kostenlos), welches leicht zu bedienen ist und gute Ergebnisse liefert.

3. Um die erstellte .ico Grafik mit der Webseite zu verknüpfen, ist es nötig, im HTML-Header der Webseite folgende Links einzubinden.

<link  rel=”shortcuticon”  href=”http://IhreDomain.de/favicon.ico”  type=”image/x-icon”/>

<link  rel=”icon”  href=”http://IhreDomain.de/favicon.ico”  type=”image/x-icon”/>


Hier wird die Grafik direkt aus dem Root-Verzeichnis aufgerufen, der absolute Pfad zum Icon kann natürlich auch noch angepasst werden. Die .ico Datei sollte dann allerdings immer zusätzlich noch im Root-Verzeichnis liegen, da manche Browser nur dort nachsehen und den angegebenen Pfad ignorieren.

4. Als letztes überprüft man online mit einen Favicon-Validator, ob das Icon auch wirklich vom Webserver richtig ausgeliefert wird.