Favicon wird nicht aktualisiert? Ursachen und Fixes

Du hast das Favicon ausgetauscht, aber im Tab erscheint noch das alte Logo. Das passiert, weil Favicons auf mehreren Ebenen gecacht werden: im Browser, am CDN und manchmal im Service Worker. Die neue Datei liegt oft schon auf dem Server, während Clients weiterhin die alte Version unter derselben URL ausliefern.

Dieser Artikel erklärt, warum das so ist und wie du ein Update erzwingst. Nach jedem Schritt kannst du die Live-URL mit dem Favicon Check prüfen, ob der Server wirklich die neue Datei liefert.

Nicht angezeigt vs. nicht aktualisiert

Beides wirkt ähnlich, braucht aber unterschiedliche Fixes.

Wenn das Icon nie sichtbar war, starte mit Favicon wird nicht angezeigt? So behebst du es. Wenn ein funktionierendes Icon durch ein neues ersetzt werden soll, bleib hier.

Warum Browser Favicons so hart cachen

Favicons werden bei fast jedem Seitenaufruf geladen. Browser speichern sie teils in einem eigenen Favicon-Cache, getrennt vom normalen HTTP-Cache. Chrome, Firefox und Safari können ein Icon tagelang oder wochenlang behalten, obwohl die Datei auf dem Server schon getauscht wurde.

Das war sinnvoll, als sich Favicons selten änderten. Bei einem Rebranding ist es ärgerlich.

Ebenen, die veraltete Icons liefern können:

1. Browser-Favicon-Cache - lokal, pro Profil
2. HTTP-Cache-Header auf der Icon-Datei selbst
3. CDN-Edge-Cache - Cloudflare, Fastly, Vercel usw.
4. Service-Worker-Cache - wenn deine PWA statische Assets pauschal cached
5. Reverse Proxy - nginx oder Apache mit langen expires-Werten für Static Files

Oft musst du mehr als eine Ebene leeren.

Schritt 1: Prüfen, ob der Server die neue Datei hat

Bevor du dem Cache die Schuld gibst, verifiziere Production.

Öffne die Icon-URL direkt in einem privaten Fenster:

https://deinedomain.de/favicon.ico

Vergleiche das Bild mit dem alten Design. Lädt im Inkognito-Fenster auf einer URL, die du nie besucht hast, noch das alte Icon, liegt das Problem server- oder CDN-seitig, nicht in deinem lokalen Browser.

Die gleiche URL im Favicon Check einfügen. Die Vorschau sollte das neue Motiv zeigen. Zeigt das Tool noch das alte Icon, hat der Deploy die Datei nicht ersetzt oder ein CDN-Knoten liefert veraltete Bytes.

View-Source: welche href-Werte sind deklariert?

Seitenquelltext der Startseite öffnen. Alle href-Werte bei rel="icon" notieren:

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

Jede URL in einem neuen Tab öffnen. Alle müssen das neue Bild liefern. Nur favicon.ico tauschen, während HTML noch auf eine alte PNG zeigt, ist ein häufiger Fehler.

Schritt 2: Cache-Busting mit neuem Dateinamen

Der zuverlässigste Fix: nicht dieselbe URL wiederverwenden.

Statt /favicon.ico an Ort und Stelle zu überschreiben, einen neuen Namen ausliefern:

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

Deploy, einmal hart neu laden, und der Browser behandelt die Ressource als neu. Für diese URL existiert noch kein Cache-Eintrag.

Query-Strings funktionieren ebenfalls:

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

Die meisten Browser akzeptieren das. Manche CDNs ignorieren Query-Parameter, wenn sie nicht auf Variation konfiguriert sind. Ein neuer Dateiname ist bei CDN-lastigen Setups sicherer.

Nach dem Umbenennen alle Referenzen anpassen:

• HTML-link-Tags im Layout
• Icon-Pfade in manifest.json
• CMS-Theme-Einstellungen
• Framework-Metadaten in Next.js oder vergleichbar

Die vollständige Tag-Liste findest du in Favicon per HTML einbinden.

Schritt 3: CDN- und Server-Cache-Header anpassen

Statische Assets haben oft lange Cache-Control-Werte:

Cache-Control: public, max-age=31536000, immutable

Das passt für gehashte Build-Dateien. Für Favicons, die du ohne Umbenennung ersetzt, ist es falsch.

nginx-Beispiel

location = /favicon.ico {
    add_header Cache-Control "public, max-age=3600";
}

Kürzere TTL für Icon-Pfade, oder versionierte Dateinamen mit langem Cache darauf.

Cloudflare

Nach dem Deploy Cache leeren für /favicon.ico und alle PNG-Icon-Pfade. Caching > Configuration > Purge Cache > Custom Purge mit exakten URLs.

Bei Page Rules mit "Cache Everything" können Favicon-Anfragen wochenlang nicht beim Origin landen.

Vercel und Netlify

Redeploy ersetzt Dateien, aber der Edge-Cache kann kurz alte Bytes liefern. Purge im Dashboard oder Datei umbenennen, damit der Edge einen Cache Miss bekommt.

Schritt 4: Browser-Favicon-Cache lokal leeren

Wenn der Server stimmt, zeigt dein Hauptbrowser im Tab vielleicht noch das alte Icon.

In dieser Reihenfolge testen:

1. Privates oder Inkognito-Fenster - schnellster Check
2. Hard Refresh - Cmd+Shift+R (Mac) oder Strg+Shift+R (Windows)
3. Anderer Browser, den du für die Seite noch nicht genutzt hast
4. Website-Daten löschen - Chrome: Schloss-Symbol > Website-Einstellungen > Daten löschen
5. Chrome Favicon-Cache (letzter Ausweg): alle Tabs der Seite schließen, Browserverlauf mit "Bilder und Dateien im Cache" leeren

Safari auf macOS cached Favicons pro Domain. Safari komplett beenden und neu starten, wenn Inkognito nicht reicht.

Mobile Browser cachen noch härter. Unter iOS reicht Entfernen aus dem Verlauf selten. Ein neuer Dateiname in HTML ist der praktische Fix, ohne Nutzer zum Löschen aller Websitedaten zu zwingen.

Schritt 5: Service Worker und PWAs

Registriert deine Seite einen Service Worker, kann er /favicon.ico unter einer Static-Assets-Strategie cachen:

workbox.precaching.precacheAndRoute([
  { url: '/favicon.ico', revision: null },
]);

Revision erhöhen oder Favicon aus dem Precache entfernen. Nach dem Deploy behalten Nutzer mit altem Worker das alte Icon, bis der Worker aktualisiert wird.

In DevTools > Application > Service Workers zum Testen "Update" und "Unregister" nutzen.

Schritt 6: CMS und Build-Pipeline

WordPress und Theme-Caches

Manche Themes speichern Favicon-URLs in der Datenbank. Neues File in der Mediathek hochladen aktualisiert die gespeicherte URL nicht. Site Icon unter Design > Customizer erneut setzen und speichern.

Page-Cache-Plugins (WP Rocket, W3 Total Cache) cachen HTML mit alten href-Werten. Nach Favicon-Änderungen alle Caches leeren.

Next.js und Static Export

Icons in public/ deployen mit dem Build. Nur lokal die Datei tauschen ohne Redeploy lässt Production alt. CI-Pipeline und Artefakt prüfen.

App-Router-Metadaten in app/icon.png erzeugen Routen beim Build. Quelldatei ersetzen und neu bauen.

Git und Groß-/Kleinschreibung

Umbenennung von Favicon.ico zu favicon.ico auf macOS registriert sich in Git manchmal nicht. Linux-Production liefert weiter die alte Datei. Explizit git mv nutzen.

Schritt 7: apple-touch-icon und Manifest hinken hinterher

Tab-Icon ist neu, aber das iOS-Homescreen-Icon zeigt noch das alte Kachel-Bild. Das ist eine andere Datei:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

iOS cached Homescreen-Icons sehr aggressiv. Nutzer müssen die Verknüpfung entfernen und neu anlegen, oder du änderst die apple-touch-icon-URL. Siehe Apple Touch Icon fehlt auf iOS, wenn die Kachel gar nicht aktualisiert wurde.

PWA-Manifest-Icons in site.webmanifest folgen derselben Regel. Pfade aktualisieren und Manifest-Version erhöhen, wenn dein Tooling das unterstützt.

Typische Fehler beim Favicon-Update

Datei überschreiben ohne CDN-Purge

Neues favicon.ico per FTP hochgeladen. Cloudflare liefert aus Frankfurt noch die Version von 2023.

Nur ein Format aktualisiert

Neues ICO, alte 32×32-PNG noch im HTML. Chrome wählt je nach Display die PNG. Beides muss zusammenpassen.

Auf localhost getestet, Production ignoriert

Localhost liest von der Festplatte. Production kommt vom CDN. Immer die öffentliche URL prüfen.

Unscharfes neues Icon für altes gehalten

Hochskaliertes Logo wirkt anders, aber schlecht. Erst Favicon unscharf? So behebst du Pixelierung prüfen, bevor du dem Cache nachjagst.

Browser-Tab tagelang offen gelassen

Manche Browser erneuern Favicons nur bei Navigation oder Neustart. Tab schließen und frisch öffnen.

Schritt-für-Schritt-Workflow

1. Icon-Dateien auf dem Server oder im Repo ersetzen.
2. Dateien umbenennen oder Version-Query-Strings in HTML, Manifest und CMS setzen.
3. Auf Production über HTTPS deployen.
4. CDN-Cache für alle Icon-URLs leeren.
5. Mit Favicon Check scannen. Vorschau muss neues Motiv zeigen.
6. In Inkognito in Chrome, Firefox und Safari testen.
7. Optional: Open Graph Scanner auf derselben URL für einen vollständigen Metadaten-Check.

Wann warten, wann handeln

Zeigt Inkognito das neue Icon und dein normales Profil noch das alte, ist der Server in Ordnung. Lokaler Cache läuft ab oder du leerst ihn.

Zeigt Inkognito nach CDN-Purge und Umbenennung noch das alte Icon, Request in der Network-Tab verfolgen. Welcher Server antwortet, welcher Cache-Control-Header kommt zurück?

Google-Favicons in den SERPs aktualisieren sich nach Recrawl in eigenem Tempo. Tab-Fix ändert SERP-Icons nicht sofort.

FAQ

Warum wird mein Favicon nach dem Tausch nicht aktualisiert?

Browser und CDNs cachen Favicon-URLs aggressiv. Überschreiben desselben Pfads liefert oft veraltete Bytes, bis du die Datei umbenennst, CDN-Cache leerst oder die TTL abläuft.

Reicht Hard Refresh für ein neues Favicon?

Nein. Hard Refresh lädt HTML neu, invalidiert aber nicht zwingend den Favicon-Cache. Inkognito oder neuer Dateiname ist zuverlässiger.

Soll ich ?v=2 an Favicon-URLs hängen?

Query-Strings funktionieren bei vielen Browsern und Origins. CDNs, die Query-Strings ignorieren, brauchen einen umbenannten Dateinamen. Beides ist gültig; Dateiversion ist bei CDN-Setups sicherer.

Wie lange hält Favicon-Cache?

Browser-Favicon-Cache kann Tage bis Wochen dauern. CDN-Cache hängt von deinen Cache-Control-Headern ab, oft Stunden bis ein Jahr. Es gibt kein festes Ablaufdatum.

Cloudflare geleert, lokal noch altes Icon?

Lokaler Browser-Cache ist getrennt vom CDN. Nach Purge Inkognito testen. Stimmt Inkognito, Site-Daten im Hauptprofil löschen oder warten.

Muss ich favicon.ico und PNG anpassen?

Wenn HTML beides deklariert, ja. Browser wählen je nach Kontext unterschiedliche Formate. Alle deklarierten URLs nach Rebranding synchron halten.

In Chrome neu, in Safari alt?

Safari hat einen eigenen Favicon-Speicher. Safari beenden und neu starten oder neue href setzen. macOS und iOS verhalten sich nicht identisch.

Live-Datei ohne Browser-Cache prüfen?

Favicon Check nutzen oder curl mit Cache-Busting: curl -I "https://example.de/favicon.ico?nocache=$(date +%s)".

Fazit

Ein Favicon, das sich nicht aktualisiert, ist fast immer Cache im Browser, am CDN oder beides - plus dieselbe URL wiederverwenden. Versionierte Dateinamen ausliefern, CDN nach Deploy leeren, Cache-Header auf Icon-Pfaden kürzen und die Live-Datei mit dem Favicon Check bestätigen. Neue Besucher sehen das neue Icon sofort; Bestandsnutzer bekommen es, sobald ihr Cache die neue URL verfehlt.