Was ist ein Favicon?
Hast du gerade zwölf Tabs offen? Dann suchst du die richtige Seite nicht über den Titel, sondern über das kleine Bild links daneben. Genau das ist das Favicon.
Der Name kommt von „favorite icon“, also Lesezeichen-Symbol. Das Mozilla Developer Network beschreibt es als winziges Symbol, das in der Adressleiste, in Tabs und im Lesezeichen-Menü erscheint. Es dient der Nutzerführung und einem einheitlichen Markenauftritt.
Heute taucht es an deutlich mehr Stellen auf:
- im Browser-Tab und in der Lesezeichenleiste
- im Verlauf und in der Liste häufig besuchter Seiten
- neben deinem Treffer in den Google-Suchergebnissen
- als App-Symbol, wenn jemand deine Seite auf den Startbildschirm des Handys legt
Was verlangt Google?
Bei Google steht das Favicon direkt neben deinem Websitenamen über jedem Treffer. Ist es unscharf, verzerrt oder fehlt es, wirkt dein Ergebnis wie ein Fremdkörper. Google hat dafür klare Regeln:
- Quadratisch (Seitenverhältnis 1:1), mindestens 8 × 8 Pixel. Google empfiehlt größer als 48 × 48 Pixel, damit es überall scharf aussieht.
- Format: BMP, GIF, ICO, PNG, JPEG, PPM oder TIFF. SVG steht nicht auf der Liste.
- Crawlbar: Googlebot muss die Startseite abrufen dürfen und Googlebot-Image die Bilddatei. Keine von beiden darf in der robots.txt gesperrt sein.
- Ein Favicon pro Hostname: example.de und shop.example.de können je eins haben, example.de/shop nicht.
- Stabile Adresse: Die URL der Datei sollte sich nicht ständig ändern.
Bis Oktober 2024 verlangte Google noch ein Vielfaches von 48 Pixeln. Diese Regel liest du in vielen Anleitungen bis heute. Sie ist abgelöst. Wer trotzdem 48, 96 oder 144 Pixel nimmt, macht nichts falsch.
Welche Dateien brauchst du?
Früher reichte eine Datei „favicon.ico“ im Wurzelverzeichnis. Heute wollen Browser, Handys und Suchmaschinen unterschiedliche Größen. Die gute Nachricht: Mit einer Handvoll Dateien bist du durch.
Datei
Wofür
favicon.ico, 32 px
Browser-Tab, auch ältere Browser
icon.svg, skalierbar
Moderne Browser, Dark Mode möglich
PNG ab 48 px
Google-Suchergebnisse
Touch-Icon, 180 px
iPhone und iPad, Startbildschirm
192 und 512 px
Android, Web-App-Manifest
Die Aufteilung folgt der Anleitung „How to Favicon“ von Evil Martians, die unter Webentwicklern als Standard gilt. Chrome braucht für eine installierbare Web-App mindestens ein Symbol mit 192 und eins mit 512 Pixeln im Web-App-Manifest; daraus skaliert es den Rest selbst.
Ein SVG-Favicon hat einen Vorteil: Es bleibt in jeder Größe scharf und kann per CSS auf den Dark Mode reagieren. Laut caniuse.com unterstützen es Browser von rund 93 % der Nutzer weltweit, Safari erst ab Version 26. Deshalb immer zusätzlich ICO oder PNG ausliefern.
So stellst du das Favicon in WordPress ein
In WordPress brauchst du kein Plugin. Seit Version 6.5 findest du das Website-Icon unter Einstellungen › Allgemein, vorher lag es im Customizer unter „Website-Informationen“.
- Bild quadratisch anlegen, mindestens 512 × 512 Pixel, am besten als PNG.
- Hochladen, zuschneiden, speichern.
- Im privaten Browserfenster prüfen — der normale Browser zeigt oft noch lange das alte Icon aus dem Cache.
Häufige Fehler
Fehler 1 · Nur ein SVG ausliefern
Im Chrome-Tab sieht alles gut aus. Google kann SVG aber nicht als Favicon verwenden, und ältere Safari-Versionen auch nicht. Ergebnis: Weltkugel in der Suche. Ein PNG oder ICO gehört immer dazu.
Fehler 2 · Datei per robots.txt gesperrt
Manche Seiten sperren ganze Ordner wie „/wp-content/“ für Crawler. Liegt dort das Favicon, kommt Google nicht dran. Prüf die Freigabe mit dem robots.txt-Bericht in der Search Console.
Fehler 3 · Alte und neue Icons konkurrieren
Ein altes „favicon.ico“ im Hauptverzeichnis, ein Standard-Icon vom Theme und dein neues im Website-Icon-Feld: Dann entscheidet der Zufall, welches erscheint. Räum auf, bis nur noch ein Satz Icons übrig ist.
Fehler 4 · Sofortige Wirkung erwarten
Du tauschst das Favicon und siehst bei Google weiter das alte. Das ist normal und kein Fehler. Gib Google ein paar Wochen, bevor du an der Datei herumschraubst.
Favicon, Logo und Vorschaubild
Das Logo ist deine vollständige Marke für Kopfzeile, Visitenkarte und Briefbogen. Das Favicon ist die stark verkleinerte Fassung davon, die auch bei 16 Pixeln noch funktionieren muss.
Das Vorschaubild für geteilte Links kommt dagegen über Open Graph. Es ist ein großes Querformat-Bild für soziale Netzwerke und Messenger, kein Icon. Beides brauchst du — aber für verschiedene Orte.
Häufige Fragen
Welche Größe braucht ein Favicon?
Für den Browser-Tab reicht ein ICO mit 32 Pixeln. Google empfiehlt mehr als 48 × 48 Pixel, iPhones nutzen 180 Pixel, Android und Web-Apps 192 und 512 Pixel. Am einfachsten legst du ein quadratisches Bild mit 512 Pixeln an und erzeugst daraus die kleinen Größen.
Warum zeigt Google mein Favicon nicht an?
Meist ist es eins von drei Dingen: falsches Format wie SVG, ein nicht quadratisches oder zu kleines Bild oder eine Sperre in der robots.txt. Manchmal fehlt nur Zeit — das Crawlen dauert Tage bis Wochen. Selbst wenn alles stimmt, garantiert Google die Anzeige nicht.
Kann ich ein SVG als Favicon nehmen?
Ja, für moderne Browser. Es bleibt scharf und kann im Dark Mode die Farbe wechseln. Für Google und ältere Safari-Versionen brauchst du aber zusätzlich eine PNG- oder ICO-Datei.
Wo stelle ich das Favicon in WordPress ein?
Seit WordPress 6.5 unter Einstellungen › Allgemein im Feld „Website-Icon“, in älteren Versionen im Customizer unter „Website-Informationen“. Das Bild muss quadratisch sein und mindestens 512 × 512 Pixel haben.
Bringt ein Favicon mehr Klicks?
Eine belastbare Studie zur Klickrate gibt es nicht. Sicher ist: Ein klares Favicon macht deinen Treffer und deinen Tab wiedererkennbar, und eine Weltkugel wirkt unfertig. Für den Aufwand von zehn Minuten lohnt es sich immer.
