Favicon erstellen

Worauf es ankommt

Ein Favicon wird meist 16 Pixel groß dargestellt – kleiner als dieser Buchstabe. Feine Linien, Schrift oder ein ganzes Logo verschwinden dort zu einem Fleck. Was funktioniert: ein einzelnes Zeichen, eine klare Form, kräftige Farben. Die Vorschau oben in der Browsertab-Ansicht zeigt es in Originalgröße.

Die Dateien gehören in das Wurzelverzeichnis der Website, also dorthin, wo auch robots.txt und sitemap.xml liegen. Browser suchen die favicon.ico notfalls von selbst dort – verlassen sollte man sich darauf nicht, deshalb die Zeilen im <head>.

Das Apple-Symbol bekommt immer einen deckenden Hintergrund. iOS legt transparente Bereiche sonst schwarz aus, was fast nie gewollt ist.

Das Bild bleibt auf deinem Rechner: Alle Größen entstehen im Browser, es wird nichts an einen Server geschickt.

Warum ein Bild nicht reicht

Ein Favicon wird in sehr verschiedenen Größen gebraucht: 16 Pixel im Browsertab, 32 in der Lesezeichenleiste, 180 auf dem iPhone-Startbildschirm, 192 und 512 für Android und die Web-App-Beschreibung. Wer nur eine große Datei hinterlegt, überlässt das Verkleinern dem Browser – und aus einem detaillierten Logo wird bei 16 Pixeln ein Fleck.

Deshalb entstehen hier alle Größen einzeln, dazu die favicon.ico mit mehreren Auflösungen in einer Datei. Ältere Browser und manche Suchmaschinen fragen weiterhin genau diese eine Adresse im Wurzelverzeichnis ab, ohne ins Markup zu schauen.

Was ein gutes Motiv ausmacht

Bei 16 Pixeln überlebt eine Form, kein Schriftzug. Ein einzelner Buchstabe funktioniert, zwei werden eng, drei sind Matsch. Feine Linien verschwinden, dünne Umrisse ebenso – kräftige Flächen mit deutlichem Kontrast bleiben erkennbar. Ein Rand von etwa zehn Prozent verhindert, dass das Motiv in runden Kacheln beschnitten wird.

Und: Der Tab-Hintergrund ist im dunklen Modus dunkel. Ein schwarzes Logo auf durchsichtigem Grund verschwindet dort. Entweder eine Farbe wählen, die auf beiden Untergründen steht, oder eine Hintergrundfläche mitgeben.