Favicon SEO: So optimierst du dein Website-Icon für Google
Ein Website-Icon (Favicon) ist weit mehr als ein schmückendes Detail in der Browser-Tab-Leiste. Die richtige Umsetzung dieses kleinen Symbols hat große Auswirkungen. Richtig eingesetzt und optimiert, steigert es die Markenwahrnehmung, sorgt für Vertrauen und kann indirekt auch deine SEO-Ergebnisse verbessern. In diesem Guide erfährst du, wie du es optimal umsetzt:
- Was ein Favicon ist und welche Rolle es für Nutzer & Google spielt
- Wie du ein professionelles Favicon erstellst und was du dabei beachten musst
- Best Practices für Implementierung & Design
- Typische Fehler, die du bei der Umsetzung vermeiden solltest
- Welche Auswirkungen ein optimiertes Website-Icon auf die CTR in Suchergebnissen hat
Was ist ein Favicon?
Ein Favicon ist ein kleines Symbol (meist 16x16 Pixel), das in Browser-Tabs, Lesezeichen, Suchergebnissen und Mobilgeräten erscheint. Es dient als visuelles Markenzeichen deiner Website. Die professionelle Umsetzung dieses Website-Icons beginnt mit dem Verständnis seiner Bedeutung.
Anwendungsorte:- Tabs im Browser 🏷️
- Lesezeichen ⭐
- Mobile Homescreens 📱
- Google-Suchergebnisse 🔍
👉 Obwohl es klein ist, spielt die korrekte Umsetzung deines Website-Icons eine große Rolle für die User Experience und das Branding.
Warum dein Website-Icon für SEO wichtig ist
Direkt beeinflussen Favicons dein Google-Ranking nicht. Aber durch professionelle Umsetzung steigern sie wichtige Metriken:
- Bessere User Experience → Nutzer finden deine Seite leichter wieder.
- Mehr Klicks in SERPs → Ein professionelles Icon erhöht die CTR.
- Markenstärkung → Ein einheitlich gestaltetes Icon steigert den Wiedererkennungswert.
💡 Google selbst betont, dass gut umgesetzte Favicons Teil der Search Appearance sind – und damit deinen ersten Eindruck in den SERPs prägen.
So setzt du dein Favicon optimal um: Best Practices
Befolge diese Schritte, um dein Website-Icon technisch und gestalterisch perfekt umzusetzen:
1. Richtige Größe & Dateiformate
Damit dein professionelles Favicon überall korrekt angezeigt wird, solltest du mehrere Versionen erstellen:
Empfohlene Größen:- 16x16 px → Standard-Browser-Tab
- 32x32 px → Bookmarks & Desktop
- 48x48 px oder größer → Windows Tiles, Mobile
.ico→ Browser-Standard.png→ Hohe Qualität, universell einsetzbar.svg→ Skalierbar & modern
| Plattform / Gerät | Größe (px) | Verwendung / Hinweis | Format |
|---|---|---|---|
| Browser Standard | 16x16 | Klassisches Favicon in Browser-Tabs | .ico, .png |
| Browser Standard | 32x32 | High-DPI Tabs, Windows Icons | .ico, .png |
| Browser Standard | 48x48 | Windows Shortcuts, einige Browser | .ico, .png |
| Apple iOS | 57x57 | iPhone (Classic, iOS ≤6) | .png |
| Apple iOS | 60x60 | iPhone Retina | .png |
| Apple iOS | 72x72 | iPad (Classic) | .png |
| Apple iOS | 76x76 | iPad Retina (non-Retina) | .png |
| Apple iOS | 114x114 | iPhone Retina (iOS ≤6) | .png |
| Apple iOS | 120x120 | iPhone Retina (iOS 7+) | .png |
| Apple iOS | 152x152 | iPad Retina (iOS 7+) | .png |
| Apple iOS | 167x167 | iPad Pro (iOS 10+) | .png |
| Apple iOS | 180x180 | iPhone Retina (iOS 8+, @3x) | .png |
| Android / PWA | 36x36 | LDPI (Low Density) | .png |
| Android / PWA | 48x48 | MDPI (Medium Density) | .png |
| Android / PWA | 72x72 | HDPI | .png |
| Android / PWA | 96x96 | XHDPI | .png |
| Android / PWA | 144x144 | XXHDPI | .png |
| Android / PWA | 192x192 | XXXHDPI, Homescreen Icon, PWA Standard | .png |
| Android / PWA | 256x256 | Optional für große Displays | .png |
| Android / PWA | 512x512 | Pflicht für PWA & Google Play Store | .png |
| Windows / Microsoft | 70x70 | Small Tile | .png |
| Windows / Microsoft | 150x150 | Medium Tile | .png |
| Windows / Microsoft | 310x150 | Wide Tile | .png |
| Windows / Microsoft | 310x310 | Large Tile | .png |
| macOS / Safari | — | Pinned Tabs, monochrom, skalierbar | .svg |
| Sonstiges / Best Case | 512x512 | Universelles Standardformat (Google Empfehlung) | .png |
| Sonstiges / Best Case | variabel | Maskable Icons für Android (angepasst an Kreis/Square) | .png |
2. Design-Tipps für die perfekte Umsetzung
- Keep it simple → Weniger ist mehr, kleine Details gehen verloren.
- Markenfarben verwenden → Sofortiger Wiedererkennungswert.
- Kontraste testen → Dein Icon sollte auf hellen & dunklen Hintergründen gut sichtbar sein.
- Quadratisches Format → Vermeide abgeschnittene Logos.
3. Technische Implementierung korrekt umsetzen
Im <head> deiner HTML-Datei:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
Für Apple-Geräte:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
Optional für Manifest-Dateien:
{
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
Favicons in der Google-Suche
Google zeigt Favicons neben den Titeln in den mobilen Suchergebnissen und teilweise auch auf dem Desktop. Dadurch sind sie ein entscheidendes Detail für den ersten Eindruck deiner Marke.
SEO-Tipps für Favicons:- Dateigröße unter 100 KB halten
- Hohe Auflösung nutzen (mind. 48x48 px)
- Kontraste klar erkennbar gestalten
- Änderungen regelmäßig aktualisieren (z. B. bei Rebranding)
📊 Ein klares Favicon steigert nachweislich die Klickrate (CTR) und signalisiert Professionalität.
Häufige Fehler & wie du sie vermeidest
❌ Zu komplexe Designs → verschwimmen in kleinen Größen.
❌ Falsche Formate → .jpg wird nicht zuverlässig unterstützt.
❌ Fehlende Responsiveness → Das Icon wirkt auf Mobilgeräten unscharf.
❌ Kein Favicon gesetzt → Browser zeigen ein Standard-Icon → wirkt unprofessionell.
Fazit
Ein Favicon ist klein, aber hat eine große Wirkung:
- Es steigert die CTR in den SERPs.
- Es unterstützt die Brand Recognition.
- Es vermittelt Professionalität und signalisiert Google eine gepflegte Website.
👉 Wenn du die hier genannten Best Practices befolgst, nutzt du dein Favicon als effektives SEO-Tool.