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
Dateiformate:- .ico → Browser-Standard - .png → Hohe Qualität,
universell einsetzbar - .svg → Skalierbar & modern
| Plattform / Gerät | Größe (px) | Verwendung / Hinweis | Format |
|---|---|---|---|
| Browser Standard | 16x16 | Browser-Tabs | .ico, .png |
| Browser Standard | 18x18 | Browser-Extensions | .ico, .png |
| Browser Standard | 24x24 | Browser-Tabs, kleine Icons | .ico, .png |
| Browser Standard | 32x32 | Hochauflösende Tabs, Lesezeichen | .ico, .png |
| Browser Standard | 48x48 | Windows Shortcuts, Lesezeichen | .ico, .png |
| Browser Standard | 64x64 | Desktop Icons, Favicons | .ico, .png |
| Browser Standard | 128x128 | Desktop Icons, Favicons | .ico, .png |
| Browser Standard | 256x256 | High-Res Desktop Icons | .ico, .png |
| Browser Standard | 512x512 | PWA Icons / High-Res | .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 | .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 (@3x) | .png |
| Apple iOS | 256x256 | iOS App Icon / Large Display | .png |
| Apple iOS | 512x512 | High-Res App Icon | .png |
| Apple iOS | 1024x1024 | Mac App Store Icon | .png |
| Android / PWA | 36x36 | Launcher MDPI | .png |
| Android / PWA | 48x48 | Launcher HDPI | .png |
| Android / PWA | 72x72 | Launcher XHDPI | .png |
| Android / PWA | 96x96 | Launcher XXHDPI | .png |
| Android / PWA | 144x144 | Launcher XXXHDPI | .png |
| Android / PWA | 192x192 | Homescreen Icon, PWA Standard | .png |
| Android / PWA | 256x256 | Optional für große Displays | .png |
| Android / PWA | 512x512 | Pflicht für PWA & Play Store | .png |
| Android / PWA | 1024x1024 | High-Res Display | .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 |
| Windows / Microsoft | 256x256 | Desktop Icon, High-Res | .png |
| macOS / Safari | — | Pinned Tabs, monochrome, skalierbar | .svg |
| macOS / Safari | 512x512 | High-Res App Icon | .png |
| macOS / Safari | 1024x1024 | Mac App Store Icon | .png |
| High-Res | 2048x2048 | Ultra-HD Displays | .png |
| High-Res | 4096x4096 | Spezial-Use, selten benötigt | .png |
| Maskable | variabel | Android Maskable Icon | .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.