Chrome Favicon fehlt im Tab? Troubleshooting

Chrome zeigt ein generisches Dokument-Icon oder leeren Platz im Tab, wo dein Favicon sein sollte. Die Seite lädt ansonsten normal. Chrome hat kein gültiges Icon aus deinem HTML oder dem Standard-Request auf /favicon.ico gefunden oder gerendert.

Dieser Guide deckt Chrome-spezifisches Verhalten auf Desktop und Android ab, plus Fixes, wenn Chrome scheitert, Firefox aber funktioniert. Jeden Schritt mit dem Favicon Check auf der Live-URL validieren.

Wie Chrome Favicons lädt

Chrome fragt Icons in etwa dieser Reihenfolge an:

1. link rel="icon"-Tags in der initialen HTML-Antwort
2. Fallback-GET auf https://deinedomain.de/favicon.ico
3. Optionales SVG, wenn deklariert mit PNG-Fallback
4. Manifest-Icons für installierte PWAs (nicht normale Tabs)

Chrome cached Favicons pro Profil in einem eigenen Store. Fehlendes Icon und veraltetes gecachtes Icon sehen unterschiedlich aus, nerven Entwickler aber gleichermaßen.

Schritt 1: View-Source prüfen, nicht DevTools Elements

Das Chrome DevTools Elements-Panel zeigt das live DOM nach JavaScript. Favicons müssen im ersten HTML-Byte-Stream stehen für zuverlässige Tab-Anzeige.

Rechtsklick > Seitenquelltext anzeigen. Nach rel="icon" suchen.

Erwartet:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Tags nur in Elements, nicht im View-Source: deine SPA injiziert zu spät. Tags ins Server-HTML oder Framework-Layout verschieben. Siehe Favicon per HTML einbinden.

Schritt 2: Icon-URLs direkt in Chrome öffnen

Jede href in einen neuen Tab kopieren. Du solltest das Bild sehen oder die Datei downloaden.

Auch Root-Fallback testen:

https://deinedomain.de/favicon.ico

404 auf deklarierten Tags und /favicon.ico garantiert fehlendes Tab-Icon in Chrome.

Seiten-URL in den Favicon Check einfügen. Das Tool listet jedes erkannte Icon und prüft /favicon.ico, wenn nicht deklariert.

Schritt 3: Pfade fixen, die Chrome nicht auflöst

Chrome löst relative URLs gegen den aktuellen Seitenpfad auf.

Kaputt auf verschachtelten Routen:

<link rel="icon" href="favicon.ico">

Auf https://example.com/docs/guide fordert Chrome https://example.com/docs/favicon.ico an.

Fix:

<link rel="icon" href="/favicon.ico">

Root-relative Pfade starten auf jeder Route an der Domain-Root.

Für CDN-gehostete Icons volle HTTPS-URLs:

<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/icons/favicon-32x32.png">

Deep URL testen, nicht nur Startseite. Chrome-Nutzer bookmarken Innenseiten.

Schritt 4: PNG, ICO und SVG in Chrome

Chrome unterstützt ICO, PNG und SVG als Favicons.

Empfohlenes Muster:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Scheitert SVG an Validierung oder falschem MIME-Type, überspringt Chrome es und nimmt den nächsten Tag. Content-Type: image/svg+xml auf SVG-Dateien sicherstellen.

Zu große PNGs (512×512 als einziges Tab-Icon) funktionieren meist, verschwenden Bandbreite. 16×16 und 32×32 für scharfe Tabs. Details in der Favicon-Größen-Anleitung.

Schritt 5: Chrome-Favicon-Cache leeren

Chrome behält Favicons länger als normalen Seiten-Cache.

Schnelle Tests:

1. Inkognito-Fenster (Cmd+Shift+N / Strg+Shift+N)
2. Hart neu laden (Cmd+Shift+R / Strg+Shift+R)
3. Neues Chrome-Profil oder anderer Rechner

Inkognito zeigt Icon, normales Profil nicht: Site-Daten löschen:

Einstellungen > Datenschutz und Sicherheit > Browserdaten löschen > Bilder und Dateien im Cache

Oder Daten für eine Site über das Schloss-Symbol in der Adressleiste entfernen.

Bei Deploy-Updates unter derselben URL Datei umbenennen statt gegen Cache zu kämpfen. Siehe Favicon wird nicht aktualisiert?.

Schritt 6: HTTPS und Mixed Content

Chrome blockiert HTTP-Favicons auf HTTPS-Seiten.

Falsch:

<link rel="icon" href="http://example.com/favicon.ico">

Security-Panel in DevTools zeigt Mixed-Content-Warnungen. Jede Icon-URL muss in Production HTTPS nutzen.

Schritt 7: Chrome-Extensions und Enterprise-Policy

Ad-Blocker und Privacy-Extensions blockieren manchmal Requests auf /favicon.ico oder Drittanbieter-CDNs.

Mit deaktivierten Extensions oder Inkognito ohne Extensions testen.

Managed Chrome kann Policies erzwingen, die Icons interner Sites entfernen. Auf unmanaged Browser vergleichen bei Policy-Verdacht.

Schritt 8: Service Worker und PWAs

Ein Service Worker mit aggressivem Precaching kann alte oder leere Favicon-Antworten liefern:

self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('favicon')) {
    event.respondWith(caches.match(event.request));
  }
});

In DevTools > Application > Service Workers zum Debuggen deregistrieren. Cache-Revision nach Icon-Updates erhöhen.

Chrome auf Android

Mobiles Chrome nutzt dieselben rel="icon"-Tags wie Desktop für Tabs. Nicht apple-touch-icon für Tabs.

Fehlt Tab-Icon speziell in Android Chrome:

• Mobiles Netz blockiert CDN prüfen
• Icons nicht hinter Geo-Sperren
• WiFi vs. Mobilfunk testen

Homescreen-Icons auf Android kommen aus manifest.json, nicht Tab-Favicons. Falsches Launcher-Icon vs. fehlendes Tab-Icon sind verschiedene Probleme. Siehe Falsches Favicon auf dem Handy-Homescreen?.

DevTools Network-Tab für Favicon-Requests

Chrome listet Favicon-Fetches in manchen Versionen getrennt von Dokument-Requests. DevTools > Network öffnen, Seite neu laden, nach "favicon" oder "icon" filtern.

Du solltest Requests sehen, die zu deinen deklarierten href-Werten passen. Status 200 mit Typ image/png oder x-icon bestätigt, dass Chrome Bytes erhalten hat. Status (failed) oder (blocked) deutet auf Mixed Content, CORS bei Cross-Origin-Icons oder Extension-Eingriff hin.

Erscheint gar kein Favicon-Request, nutzt Chrome evtl. Cache und überspringt den Netzwerk-Call. Hard Reload mit "Disable cache" im Network-Tab erzwingt frischen Fetch.

Response-Header prüfen:

Content-Type: image/png
Cache-Control: public, max-age=86400

Falscher Typ bei SVG oder korruptes ICO kann Chrome dazu bringen, die Antwort zu verwerfen und generisches Tab-Icon zu zeigen - ohne offensichtlichen Console-Fehler.

Häufige Chrome-Szenarien in der Praxis

Single Page App ohne SSR: React- oder Vue-App liefert leeres <head> beim ersten Paint. Chrome zeigt Globus, bis JavaScript link-Tags injiziert - manchmal zu spät. Fix: Tags in index.html oder SSR-Layout.

Reverse Proxy strippt link-Tags: Selten, aber manche Security-Appliances filtern <link>-Elemente. View-Source auf Production muss Tags zeigen. Proxy-Logs prüfen.

Mehrere Chrome-Profile: Du testest im Work-Profile mit Extensions, Kollegen im Private-Profile ohne. Immer Inkognito als gemeinsame Baseline nutzen.

Headless CI ohne Icon-Assertion: E2E-Tests prüfen Funktionalität, nicht Tab-Icons. Favicon Check in CI-Pipeline ergänzen für Regression-Schutz.

Lighthouse und PageSpeed

Lighthouse meldet fehlende favicon.ico manchmal als Best-Practice-Hinweis, auch wenn PNG-Tags funktionieren. Das ist kein Performance-Score-Killer, aber ein Signal für unvollständiges Setup. Entweder ICO ergänzen oder bewusst ignorieren, wenn PNG-Set vollständig ist.

PageSpeed Insights fetcht die Seite von Google-Servern. Wenn Icons hinter Geo-Blocking oder Bot-Schutz liegen, kann der Report "kein Favicon" anzeigen, während Nutzer ein Icon sehen. Immer Favicon Check auf derselben URL als zweite Meinung nutzen.

Chrome DevTools unter Application > Frames > top zeigt registrierte Icons in manchen Versionen nicht explizit an. Deshalb View-Source plus direkter URL-Test wichtiger als nur Elements-Panel.

Wenn du mehrere Chrome-Kanäle (Stable, Beta, Dev) parallel installiert hast, kann jedes Profil ein anderes gecachtes Icon zeigen. Für reproduzierbare Tests ein dediziertes Testprofil ohne Extensions nutzen.

Chrome vs. andere Browser

Safari-spezifisch: Safari Favicon funktioniert nicht.

Allgemeine Ursachen fehlender Icons: Favicon wird nicht angezeigt?.

Typische Chrome-Favicon-Fehler

Nur localhost getestet

Chrome auf localhost liefert Dateien anders als Production-CDN. Immer Production-URL prüfen.

Auf JavaScript-Meta-Frameworks verlassen

Client-seitige Head-Manager updaten zu spät für First-Paint-Favicon in manchen Chrome-Versionen.

/favicon.ico an Root vergessen

Chrome fordert es an, auch wenn PNG-Tags existieren. 404 ist harmlos, wenn Tags funktionieren, aber viele Setups hängen nur an der Root-Datei.

Unscharfes Icon wirkt "fehlend"

Weiß-auf-weiß-Favicon ist in Chrome Light-Mode-Tabs unsichtbar. Kontrast prüfen. Pixelierung: Favicon unscharf?.

Staging hinter Basic Auth

Chrome holt keine Icons hinter Auth-Walls für anonyme Besucher. Favicon Check scheitert ebenfalls. Icons öffentlich machen.

Schritt-für-Schritt Chrome-Fix

1. View-Source auf der kaputten Seite in Chrome. Alle Favicon-Tags kopieren.
2. Jede Icon-URL in neuem Chrome-Tab öffnen. 404s fixen.
3. /favicon.ico an Domain-Root bestätigen, wenn du Fallback nutzt.
4. Tags ins serverseitig gerenderte HTML, wenn im View-Source fehlend.
5. Über HTTPS deployen mit korrekten MIME-Types.
6. Mit Favicon Check scannen.
7. Chrome Inkognito testen. Dann normales Profil nach Cache-Clear falls nötig.
8. Optional: Open Graph Scanner für vollständigen Metadaten-Audit auf derselben URL.

FAQ

Warum wird mein Favicon nur in Chrome nicht angezeigt?

Oft Chrome-Favicon-Cache, SVG ohne Fallback oder Tags nach JavaScript. View-Source und Inkognito isolieren die Ursache.

Braucht Chrome favicon.ico?

Nein, aber Chrome fordert /favicon.ico automatisch an. Explizite link-Tags mit PNG empfohlen. Fehlen beides, generisches Icon.

Wie erzwinge ich ein Favicon-Reload in Chrome?

Datei umbenennen und href anpassen, oder ?v=2 anhängen. Cache-Bilder lokal löschen. Inkognito bestätigt Server-Fix.

Chrome zeigt Favicon auf Startseite, nicht auf Blog-Posts?

Relative Icon-Pfade brechen auf verschachtelten URLs. Root-relative /favicon.ico-Pfade nutzen.

Kann Chrome SVG-Favicons?

Ja, mit korrektem MIME-Type. PNG- oder ICO-Fallback für Kompatibilität und Audit-Tools behalten.

Favicon nach Chrome-Update verschwunden?

Selten, aber Extensions oder Service-Worker-Cache prüfen. Server-Tags meist unverändert.

Favicon fehlt im Tab, erscheint in der Lesezeichenleiste?

Unterschiedliche Cache-Buckets in manchen Chrome-Versionen. Gleicher Fix: korrekte URL, Cache busten, Inkognito prüfen.

Chrome ohne Cache testen?

Inkognito plus Favicon Check auf Production-URL. Der Scanner fetcht wie ein frischer Client.

Fazit

Ein fehlendes Chrome-Tab-Icon heißt: Chrome hat kein gültiges Icon aus HTML oder /favicon.ico bekommen. Serverseitig gerenderte Tags, root-relative Pfade, HTTPS-URLs und MIME-Types fixen. Mit Favicon Check und Chrome Inkognito bestätigen. Die meisten Fälle sind Pfad- oder Cache-Probleme, keine Chrome-Bugs.