Favicon-Cache erklärt - warum der alte Tab bleibt

Browser cachen Favicons getrennt vom normalen Seiten-Cache, weil Tab-Icons früh geladen, pro Origin gespeichert und sitzungsübergreifend wiederverwendet werden. Tauschst du favicon.ico unter derselben URL aus, sehen viele Nutzer noch das alte Zeichen, bis Cache abläuft oder der Dateiname wechselt.

Dieser Guide erklärt warum, wie Chrome, Firefox und Safari Favicon-Cache handhaben, und wie du ein neues Icon ohne Verwirrung im Team ausrollst.

Kurzantwort - warum das neue Favicon fehlt

Du hast vermutlich korrekt deployed. Der Browser zeigt noch ein gecachtes Bitmap, keyed by URL, nicht nach Dateiinhalt. Favicon-Requests folgen oft anderen Revalidierungsregeln als HTML. Gleicher Pfad plus neue Pixel ergibt altes Tab-Icon.

Weitere Auslöser:

• CDN oder Hosting liefert noch das alte ICO
• HTML href nur in einem Template aktualisiert
• Hard-Refresh lädt Seite, nicht immer Favicon-Store
• Manifest und apple-touch-icon cachen separat vom Tab-Favicon

Lädt gar nichts, fehlt die Datei. Starte mit Favicon wird nicht angezeigt. Hier geht es um veraltete Icons nach erfolgreichem Deploy.

Wie Favicon-Caching vom Seiten-Cache abweicht

Normale Seiten nutzen Cache-Control, ETag, Last-Modified. Favicons bekommen diese Header auch, aber Browser halten zusätzlich eine eigene Favicon-Datenbank pro Profil.

Chrome kann gecachtes 16×16 rasterisieren, obwohl view-source neue link-Tags zeigt. HTML neu, Bitmap alt.

Cache-Schichten, die du leeren musst

1. Browser-Favicon-Store

Chrome, Firefox, Edge und Safari cachen lokal. Website-Daten oder Bilder-Cache für die Origin leeren. Tab schließen reicht nicht.

Inkognito startet mit leerem Favicon-Cache für die Session.

2. CDN und Reverse Proxy

Liegt favicon.ico hinter Cloudflare, Fastly oder nginx proxy_cache, liefern Edge-Knoten gestern's ICO mit langem max-age. Explizit purgen:

/favicon.ico
/favicon-32x32.png
/favicon-16x16.png
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest

Nur HTML purgen reicht nicht.

3. Service-Worker-Cache

PWAs mit cache-first für Static Assets liefern alte Icons. Worker-Version bumpen oder Icon-Pfade von Langzeit-Cache ausschließen, Dateinamen versionieren.

4. Mobile Home-Screen-Icons

„Zum Home-Bildschirm“ kopiert Manifest- und apple-touch-icon-Assets ins OS. Website-Update aktualisiert angeheftete Icons nicht automatisch. Verknüpfung entfernen und neu anlegen. Siehe Web-App-Manifest-Icons.

Cache-Busting, das funktioniert

Strategie A - Dateiname ändern (zuverlässigste)

Statt /favicon.ico überschreiben:

/favicon-2026.ico
/favicon-32x32-v2.png

HTML:

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

Neue URL, neuer Cache-Key.

Redirect von altem /favicon.ico behalten, wenn externe Tools dort noch anfragen.

Strategie B - Query-String (vorsichtig)

<link rel="icon" href="/favicon-32x32.png?v=20260612">

Funktioniert oft. Manche Crawler strippen Queries. Bei Rebrand lieber Dateiname versionieren.

Strategie C - kurzes Cache-Control beim Rollout

Während Deploy-Woche auf Icon-Pfaden:

Cache-Control: public, max-age=3600, must-revalidate

Nach Stabilisierung wieder langes Cache. Icons sind statisch - lang ist gut, wenn die richtige Datei live ist.

Strategie D - vor Ankündigung verifizieren

Direkt nach Deploy Favicon Check auf Production. Zeigt das Tool alte Bytes, ist CDN stale, nicht dein Laptop.

Browser-spezifisch

Chrome und Edge

Aggressive Favicon-Persistenz. Neuer Dateiname oder chrome://settings/siteData. Hard-Reload holt Favicons nicht immer.

Firefox

Ähnlich. Cache leeren oder privates Fenster.

Safari macOS und iOS

Tab- und Touch-Icons cachen getrennt. iOS Home Screen nach Manifest-Wechsel neu anpinnen.

RSS und Suche

Google-Suche-Favicon und Feed-Reader hinken Tage hinterher. Dateinamen wechseln hilft. Social-Preview-Cache ist anderes System.

Schritt für Schritt - neues Favicon ohne stale Tabs

1. Vollständiges Set aus Master exportieren. Favicon-Größen-Guide.
2. Neue Dateinamen für jede geänderte Datei.
3. Alle link-Tags in jedem Layout. Vorlage: Favicon-HTML-Beispiel.
4. site.webmanifest src-Pfade anpassen.
5. Deploy, CDN für alle Icon-URLs purgen.
6. Optional kurzes Cache-Control 24-48 Stunden.
7. Favicon Check, Dateien downloaden, Pixel prüfen.
8. Inkognito plus ein Android-Gerät testen.
9. Team informieren: angeheftete Mobile-Icons ggf. neu anlegen.

Scan zeigt neue Dateien, Desktop-Tab stale: lokaler Browser-Store, nicht Server.

Wenn Cache nicht das Problem ist

Erst Pfade fixen, dann Cache busten.

HTTP-Header für Icon-Assets

Steady-state PNG:

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

ICO:

Content-Type: image/x-icon

Manifest:

Content-Type: application/manifest+json

Falscher MIME wirkt wie Cache-Problem, ist Server-Config.

Team-Workflow

• Icon-Dateinamen im Design-System dokumentieren
• Favicon-Pfade in Deploy-Checkliste
• Favicon Check in QA
• /favicon.ico nicht in-place während High-Traffic-Rebrand überschreiben

Entwickler purgen Cache. Stakeholder oft nicht. Dateiname versionieren ist inclusiver.

Favicon-Cache vs HTML-Cache

HTML mit Cache-Control: no-cache kann trotzdem neben stale Icons stehen. Nutzer sehen neue Seiteninhalte und altes Tab-Icon gleichzeitig. Beide Asset-Klassen getrennt versionieren und purgen.

Rollback-Plan beim Rebrand

Behalte favicon-vor-rebrand.ico auf dem Server. Wenn Kontrast auf Dark Mode scheitert, schnell alte href zurückschalten, CDN purgen, Favicon Check erneut. Marketing erst nach grünem Scan ankündigen.

Monitoring während Rollout

• CDN-Purge für jeden Icon-Pfad loggen
• curl -I auf /favicon.ico nach Purge
• Scan von Büro-WLAN und Mobile LTE
• Support-Template: „Dateiname geändert, Shortcut neu anlegen auf Android“

Staging andere Dateinamen als Production, damit Tester Tabs nicht verwechseln.

Browser-spezifische Cache-Leertaste

Hard-Reload ersetzt das nicht zuverlässig. Inkognito zum Testen nach Deploy.

CDN-Konfiguration Beispiel

Cloudflare: Page Rule oder Cache Rule für /favicon* und /android-chrome* mit kürzerem TTL während Rebrand-Woche. Nach Stabilisierung wieder längeres Cache.

nginx location für Icons:

location ~* ^/(favicon|android-chrome|apple-touch-icon) {
  expires 7d;
  add_header Cache-Control "public, must-revalidate";
}

Header während Rollout anpassen, dann immutable für steady state.

Unterschied zu Social-Preview-Cache

Link-Vorschau-Cache (Facebook, LinkedIn) betrifft og:image, nicht Favicons. Rebrand braucht oft beides. Favicon-Strategien aus diesem Artikel plus OG-Debugger für Social. Verwechslung erklärt häufige Cache-Diagnosen, obwohl nur eine Schicht stale ist.

favicon.ico Redirect

Wenn du nur PNG pflegst, 301 von /favicon.ico auf /favicon-32x32.png ist besser als 404. Manche Tools fragen nur den ICO-Pfad ab. Redirect nach Deploy mit Favicon Check prüfen.

Zeitplan Erwartungen setzen

Nach Rebrand mit gleicher URL: Tab-Update bei Nutzern oft Stunden bis Tage. Mit neuer URL: schneller, aber Bookmarks auf alte Pfade zeigen evtl. altes ICO bis Redirect greift. Marketing und Support auf Filename-Strategie vorbereiten statt „Cache leeren“ als einzige Anweisung.

Support-Macro Beispiel: „Wir haben favicon-2026.ico ausgerollt. Bitte Seite neu laden. Android: Verknüpfung löschen und neu zum Home-Bildschirm hinzufügen.“

Checkliste Cache-Rollout

• Neue Dateinamen gewählt
• Alle Layouts aktualisiert
• Manifest src angepasst
• CDN für alle Icon-Pfade gepurgt
• Favicon Check zeigt neue Bytes
• Inkognito-Tab ok
• Support-Macro versendet

Details zu HTML: Favicon-HTML-Beispiel. Zu fehlenden Dateien: Favicon wird nicht angezeigt.

Warum Hard-Refresh nicht reicht

Nutzer und Entwickler erwarten Cmd+Shift+R als Universal-Fix. Bei Favicons täuscht das. Dokumentation und interne Runbooks sollten Filename-Versionierung als Standard-Rebrand-Schritt nennen, nicht wiederholtes Hard-Reload. Spart Support-Zeit.

Zusammenspiel mit Service Worker

Wenn du PWA mit Service Worker nutzt: Icon-URLs nicht dauerhaft mit cache-first und unversionierten Pfaden vorregisteren. Nach Rebrand liefert der Worker alte Icons, während HTML schon neue href-Werte zeigt. Entweder Worker-Version bumpen oder Icon-Pfade von Long-Life-Cache ausnehmen.

Google Search Favicon Cache

Auch Google zwischengespeicherte Favicons in SERPs aktualisieren verzögert. Filename-Wechsel und konsistente Signale über HTML plus ICO helfen. Das ist getrennt vom Tab-Cache im Chrome deines Laptops - beide Schichten einplanen bei Rebrand-Kommunikation.

Fazit Cache

Favicon-Cache ist normal, nicht böse. Problematisch wird er bei Rebrand ohne URL-Wechsel. Versioniere Dateinamen, purge CDN, scanne mit Favicon Check. HTML-Vorlage: Favicon-HTML-Beispiel. Fehlende Datei: Favicon wird nicht angezeigt. Häufige Setup-Fehler: Favicon-Fehler. Live-Scan: Favicon Check. Nach Purge erneut scannen, bis Download-Bytes zum neuen Design passen.

FAQ

Warum kein Update nach Hard-Refresh?

Hard-Refresh lädt Dokument. Favicon-Bitmap bleibt oft im separaten Store.

Wie lange cachen Browser Favicons?

Kein festes TTL. Variiert. Dateinamen versionieren.

Hilft favicon.ico umbenennen?

Ja. Neue URL erzwingt Fetch. Alle href anpassen.

Query-String für Favicon-Cache?

Oft ja. Weniger zuverlässig für jeden Crawler.

Android Home Screen noch alt?

Verknüpfung löschen, neu anlegen nach Manifest-Update.

Alle Nutzer sofort?

Nein. Neue URLs, CDN-Purge, kurzes Cache maximieren Adoption.

Bypassed Favicon Check den Cache?

Normaler HTTP-Client. Liefert CDN stale, zeigt das Tool stale. Beweis für Edge-Purge.

Gleich wie Open-Graph-Cache?

Nein. OG: Social-Crawler. Favicons: Browser-Tabs. Getrennt fixen.

Fazit

Browser cachen Favicons aggressiv nach URL. In-place überschreiben erzeugt stale Tabs trotz korrektem HTML. Dateinamen versionieren, alle Tags aktualisieren, CDN purgen, mit Favicon Check prüfen. HTML: Favicon-HTML-Beispiel. Manifest: Web-App-Manifest-Icons.