Ein kaputtes Favicon stoppt deine Site nicht - deshalb geht es so oft kaputt live. Tabs zeigen einen generischen Globus, iOS schneidet dein Logo zu, Android-Install-Prompts einen grauen Platzhalter. Jede Ursache ist ein kleiner HTML-, Export- oder Cache-Fehler, den du in Minuten behebst, wenn du das Muster kennst.
Dieser Guide listet die häufigsten Favicon-Fehler auf Production-Sites und wie du jeden behebst, ohne das ganze Brand-System neu zu bauen.
Fehler 1 - nur ein kleines PNG für alles
Teams exportieren ein 32×32 PNG und sind fertig. Desktop-Tabs überleben. iOS skaliert ein Mini-Bitmap hoch. Android ignoriert es fürs Manifest. Google Search zeigt weiches 48×48.
Fix: Volle Leiter aus 512×512-Master: 16×16, 32×32, 180×180, 192×192, 512×512, plus favicon.ico. Tabelle im Favicon-Größen-Guide.
Fehler 2 - relative Pfade auf Unterseiten
<link rel="icon" href="favicon.ico">Auf der Startseite ok. Unter /blog/beitrag fragt der Browser /blog/favicon.ico an.
Fix:
<link rel="icon" href="/favicon.ico" sizes="any">Details: Favicon wird nicht angezeigt.
Fehler 3 - Manifest-JSON ohne HTML-Link
site.webmanifest liegt im Repo, aber:
<link rel="manifest" href="/site.webmanifest">fehlt. Android sieht Manifest-Icons nie. Tab ok, Home Screen falsch.
Fix: Manifest-Link im serverseitigen <head>. Web-App-Manifest-Icons erklärt.
Fehler 4 - apple-touch-icon vergessen
iOS nutzt dein 32×32 Tab-PNG nicht fürs Home-Screen-Icon. Ohne Tag: Screenshot oder unscharfe Hochskalierung.
Fix:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Echtes 180×180 PNG, quadratisch, keine manuellen Ecken.
Fehler 5 - kleines Bild hochskalieren
16×16 auf 512×512 exportiert: weiche Manifest- und Splash-Icons trotz perfektem HTML.
Fix: Bei 512×512 designen, runterskalieren. Nie hochskalieren. Favicon unscharf.
Fehler 6 - falsche sizes-Metadaten bei PNG
<link rel="icon" type="image/png" sizes="any" href="/favicon-32x32.png">sizes="any" für ICO und SVG, nicht PNG.
Fix:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Copy-Paste: Favicon-HTML-Beispiel.
Fehler 7 - Favicon-Tags nur per JavaScript
React mountet <link rel="icon"> spät. DevTools Elements sieht es. View-source nicht. Crawler und First Paint verpassen es.
Fix: Tags im Server-HTML oder Framework-Layout. Favicon per HTML einbinden.
Fehler 8 - favicon.ico im Root fehlt
Browser fragen https://example.com/favicon.ico automatisch an. 404 bedeutet generisches Icon trotz PNG-Tags.
Fix: Multi-Size-ICO im Root oder Redirect auf ICO-Datei.
Fehler 9 - nur SVG, kein Raster-Fallback
SVG hilft Desktop-Retina. iOS, Manifest und Crawler brauchen PNG oder ICO.
Fix: SVG plus PNG und ICO. SVG-Favicon-Anleitung.
Fehler 10 - nicht-maskable Grafik auf Android
Logos bis zum Rand werden zu Kreisen beschnitten. Ecken verschwinden.
Fix: Maskable PNGs mit Safe Zone. Web-App-Manifest-Icons.
Fehler 11 - favicon in-place beim Rebrand überschreiben
Gleiche URL, neue Bytes, altes Tab-Icon tagelang.
Fix: Dateinamen versionieren (favicon-2026.ico), href anpassen, CDN purgen. Favicon-Cache erklärt.
Fehler 12 - Icons hinter Login oder falscher MIME
Staging mit Auth liefert 401. Manche Server: PNG als application/octet-stream.
Fix: Icons anonym mit 200 und korrektem Content-Type.
Fehler 13 - weißes Logo auf transparent
Verschwindet auf hellem Browser-UI.
Fix: Dezenter Hintergrund im Master. Hell und dunkel testen.
Fehler 14 - inkonsistente Icons auf Subdomains
www und app sind verschiedene Origins. Jedes braucht eigenes Set und HTML.
Fix: Vollen Tag-Block pro Origin oder shared CDN mit absoluten URLs.
Fehler 15 - Production nie testen
Localhost ok. Live fehlt Tag, CDN stale, ein Template ohne Layout.
Fix: Jede öffentliche Origin mit Favicon Check scannen. Workflow: Favicon Checker Anleitung.
Fehler 16 - Icons nur in CSS
Themes setzen Icons per background-image. Browser und Favicon Check lesen link rel="icon", nicht CSS.
Fix: Proper HTML-Tags aus Favicon-HTML-Beispiel.
Fehler 17 - doppelte widersprüchliche link-Tags
Customizer plus SEO-Plugin plus Theme injizieren je ein Icon. Browser wählt unvorhersehbar.
Fix: View-source, Duplikate entfernen, einen Block behalten.
Fehler 18 - Error-Pages ohne Favicon
404/500 ohne Layout-Head zeigen generischen Tab auf ansonsten gebrandeter Site.
Fix: Gleicher Icon-Block auf Error-Templates.
Fehler 19 - schlechtes ICO bit depth
8-bit ICO banding auf Retina. Datei existiert, wirkt billig.
Fix: 32-bit PNG-basiertes ICO oder PNG-Tags. Favicon unscharf.
Fehler 20 - robots oder Auth blockiert Icons
Disallow oder Login auf /favicon.ico bricht Icons auf Production-Klonen.
Fix: Anonymes GET auf alle Icon-Pfade.
Priorität beim Beheben
- Fehlende Datei oder 404 (Favicon wird nicht angezeigt)
- Relative Pfade und fehlende Tags (Favicon-HTML-Beispiel)
- Unvollständige Größen (Favicon-Größen-Guide)
- Unscharfe Exporte (Favicon unscharf)
- Stale Cache (Favicon-Cache erklärt)
Erst Infrastruktur, dann Pixel, dann Cache. Umgekehrt verschwendet Zeit.
Agentur-Handover
Beim Kunden-Launch dokumentieren:
- Alle Icon-Dateinamen und Pfade
- Manifest-URL
- CDN-Purge-Schritte
- Link zu letztem grünen Favicon Check Report
Verhindert Abweichungen zwischen Agentur-Screenshots und Kunden-Browser ohne reproduzierbare Baseline.
Fehler und Verwechslung mit OG-Bildern
Teams fixieren og:image und wundern sich über generische Tabs. Favicon und Open Graph sind getrennte Systeme. Nach OG-Fix weiter Favicon Check laufen lassen. Perfektes Tab-Icon hilft nicht bei falscher LinkedIn-Vorschau. Beides mit Open Graph Scanner und Favicon Check auf derselben URL prüfen.
Audit-Checkliste
- View-source auf Unterseite zeigt
rel="icon" -
/favicon.icoöffentlich 200 - 16×16 und 32×32 passen zu
sizes - apple-touch-icon 180×180
- Manifest-Link und gültiges JSON
- Manifest 192×192 und 512×512
- Keine relativen Icon-Pfade
- Icons nicht hinter Auth
- Rebrand mit versionierten Dateinamen
- Favicon Check grün
Symptome nach Plattform
| Plattform | Symptom | Wahrscheinlicher Fehler |
|---|---|---|
| Chrome Desktop | Generischer Globus | Fehlendes ICO/PNG |
| Chrome Desktop | Weiches Logo | Upscale |
| Safari iOS Home | Beschnitten | Kein maskable / kein apple-touch-icon |
| Android Home | Grauer Platzhalter | Manifest-Link oder Icons fehlen |
| Google Suche | Weich/falsch | Unvollständiges Set |
| RSS | Alt/generisch | Nur JS-Tags, Cache |
Fehler beheben ohne Full Rebrand
- Korrekte Größen aus bestehender Marke bei 512×512 exportieren.
- HTML aus Favicon-HTML-Beispiel.
- Deploy mit versionierten Dateinamen bei Live-Tausch.
- CDN purgen.
- Favicon Check.
- iOS und Android stichprobenartig.
Meist ein Nachmittag, kein Redesign.
Regelmäßige Reviews
Quartalsweise auf High-Traffic-Domains: ein Favicon Check Scan, Stichprobe View-source auf Blog-Artikel, ein Android- und ein iOS-Gerät. CMS-Updates und Plugin-Updates überschreiben oft unbemerkt den Customizer-Favicon mit einem generischen Theme-Icon.
Fehler nach Priorität für Solo-Entwickler
Wenn du wenig Zeit hast: zuerst root-relative Pfade und /favicon.ico 200, dann apple-touch-icon 180×180, dann Manifest-Link plus 192/512, dann PNG-Schärfe, zuletzt Cache. Diese Reihenfolge maximiert sichtbare Verbesserungen pro Stunde. Vollständige Copy-Paste-Vorlage: Favicon-HTML-Beispiel.
Zusammenfassung der Top-Fünf
- Relative Pfade auf Unterseiten
- Kein apple-touch-icon
- Manifest ohne HTML-Link
- Nur ein kleines PNG
- Favicon-Cache nach Rebrand ohne neue Dateinamen
Wer diese fünf vermeidet, ist bei den meisten Sites schon sichtbar besser aufgestellt als 80% der Konkurrenz. Rest mit Favicon Check verifizieren.
Langfristige Wartung
Domain-Umzug, CDN-Wechsel und Rebrand sind die drei Events, die Favicons am häufigsten brechen. Nach jedem Event denselben Ablauf: HTML aus Favicon-HTML-Beispiel, Deploy, CDN-Purge, Favicon Check, Stichprobe Mobile. Dokumentiere Icon-Pfade in README oder Confluence, damit das nächste Team nicht bei null startet.
Check vor Go-Live in 60 Sekunden
- Favicon Check öffnen
- Production-URL einfügen
- Auf fehlende apple-touch-icon oder Manifest-Einträge schauen
- Bei 404 sofort Favicon-HTML-Beispiel und Pfade fixen
Kein Launch ohne grünen Scan, wenn Marke und Vertrauen zählen. Ein generischer Tab untergräbt auch perfektes Copy und Design.
Fazit Fehler
Die meisten Pannen sind vermeidbare Setup-Fehler, keine Design-Krise. Volle Icon-Leiter, root-relative Pfade, Manifest verlinken, Production mit Favicon Check prüfen. Baseline: Favicon-HTML-Beispiel und Favicon-Größen-Guide. Checker-Workflow: Favicon Checker Anleitung. Cache nach Rebrand: Favicon-Cache erklärt. Unscharfe PNGs: Favicon unscharf. Fehlende Icons: Favicon wird nicht angezeigt. Vor jedem Launch Favicon Check auf Production und auf mindestens einer Unterseite ausführen. Ein grüner Scan auf / reicht nicht, wenn Blog-Templates ein anderes Layout ohne Icon-Tags nutzen. Dokumentiere im Team, welches Template der Canonical-Layout für Favicon-Tags ist. Bei Multi-Brand-Setups separate Icon-Sets pro Origin pflegen, nicht ein globales /favicon.ico für alle Subdomains teilen. Jede Origin einzeln mit Favicon Check scannen, bevor du das Rebrand kommunizierst. Das dauert unter einer Minute pro URL und verhindert teure Diskussionen mit Stakeholdern. Archiviere den Checker-Report als PDF oder Screenshot für die Projekt-Dokumentation und spätere Audits.
FAQ
Häufigster Favicon-Fehler?
Relative Pfade auf Unterseiten plus fehlende apple-touch-icon- oder Manifest-Links.
Schadet das SEO?
Indirekt. Generisches oder weiches SERP-Favicon mindert Vertrauen. Fix für UX und Marke.
Figma ok, Tab schlecht?
Tabs rendern 16×16 oder 32×32. Dünne Linien verschwinden. Vereinfachen.
PNG und ICO beide nötig?
Empfohlen. ICO für /favicon.ico-Requests, PNG für deklarierte Größen.
Welchen Fehler hat meine Site?
Production-URL mit Favicon Check scannen.
Favicon oder Open Graph zuerst?
Beides, verschiedene Oberflächen. Favicon Check und Open Graph Scanner auf derselben URL.
Verursachen CMS-Plugins Fehler?
Ja. Oft nur ein kleines ICO im Customizer. Vollen Tag-Set im Theme setzen.
Wie oft auditieren?
Nach Rebrand, Domain-Umzug, CDN- oder Framework-Wechsel. Quartalsweise bei Traffic.
Fazit
Die meisten Favicon-Pannen sind langweilig: falsche Pfade, fehlende Tags, unvollständige Größen, stale Cache, schlechte Exporte. Volle Icon-Leiter, root-relative HTTPS-Pfade, Manifest verlinken, Dateien beim Rebrand versionieren, Production mit Favicon Check prüfen. Baseline: Favicon-Größen-Guide und Favicon-HTML-Beispiel.
