Die kleine Ikone mit übergroßer Wirkung
Ein Favicon ist das kleine Symbol, das in Browser-Tabs, Lesezeichenlisten, im Browserverlauf und – seit 2019 – in den mobilen Suchergebnissen von Google angezeigt wird. Diese winzigen Bilder haben ein unverhältnismäßiges Markengewicht. Untersuchungen zeigen, dass Benutzer zwischen geöffneten Tabs hauptsächlich anhand der Favicon-Erkennung und nicht anhand des Tab-Texts unterscheiden. Ein fehlendes oder generisches Favicon erschwert das Auffinden Ihrer Website unter mehreren geöffneten Tabs.
Favicon-Größen und -Formate
| Format | Größe | Erforderlich für |
|---|---|---|
| ICO | 16×16, 32×32 | Unterstützung für ältere Browser-Tabs |
| PNG | 192×192 | Android-Startbildschirmsymbole, PWA |
| PNG | 512×512 | PWA-Begrüßungsbildschirme, High-DPI-Displays |
| Apple Touch-Symbol | 180×180 | iOS „Zum Startbildschirm hinzufügen“ |
| SVG | Skalierbar | Moderne Browser – perfekt gestochen scharf in jeder Größe |
Die Google-Suchverbindung
Seit 2019 zeigt Google Website-Favicons neben URLs in mobilen Suchergebnissen an. Ein fehlendes Favicon zeigt ein generisches Globussymbol. Ein verpixeltes oder qualitativ minderwertiges Favicon signalisiert den Nutzern – und möglicherweise auch den Qualitätssignalen von Google –, dass eine Website möglicherweise schlecht gepflegt wird. Es ist eine kleine, aber echte SEO-Überlegung, Ihr Favicon aktuell und aktuell zu halten.
So fügen Sie Ihrer Website ein Favicon hinzu
- Erstellen Sie Ihr Favicon zunächst als 512×512 PNG
- Generieren Sie ICO (mehrere Größen: 16, 32, 48) mit einem Konverter
- Ort
favicon.icoim Stammverzeichnis Ihrer Site - Zu Ihrem HTML hinzufügen
<Kopf>:<link rel="icon" href="/favicon.ico"> - Apple Touch-Symbol hinzufügen:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - Verweisen Sie auf 192px- und 512px-Symbole in Ihrem
manifest.jsonfür PWA-Unterstützung
Warum wird auf einigen Websites ein defektes Favicon angezeigt?
Die häufigsten Ursachen: falscher Dateipfad im HTML, der Server gibt eine 404 für favicon.ico zurück oder CORS-Einschränkungen, die domänenübergreifende Favicon-Anfragen blockieren. Die meisten Browser speichern Favicon-Anfragen aggressiv zwischen – leeren Sie Ihren Browser-Cache, nachdem Sie Favicon-Änderungen vorgenommen haben.