Favicon aktualisiert sich nicht? Favicon-Cache leeren

Ein Favicon, das sich nicht aktualisiert, hängt meist im Browser fest: Browser speichern Favicons in einem eigenen Cache, den ein normales Neuladen nicht anfasst. Am schnellsten hilft eine neue URL für das Icon, entweder ein neuer Dateiname oder ein Versionsparameter wie /favicon.svg?v=2, und aktualisierte <link>-Tags. Stellen Sie vorher sicher, dass Ihr Server und Ihr CDN wirklich die neue Datei senden.

Zuerst: Sendet der Server das neue Icon?

Öffnen Sie die Icon-URL direkt, zum Beispiel https://example.com/favicon.ico, in einem privaten Fenster. Sehen Sie dort noch das alte Icon, liegt das Problem auf der Serverseite: Ein CDN oder Proxy hält noch die alte Datei, das Deployment hat sie nicht ersetzt, oder das HTML verweist woandershin. Favicon Checker ruft jedes deklarierte Icon frisch ab und zeigt die Cache-Header, die Ihr Server sendet.

Die URL ändern

Eine neue URL umgeht den Browser-Cache, das CDN und Google in einem Schritt:

<link rel="icon" href="/favicon.ico?v=2" sizes="32x32">
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">

Tun Sie das auch für die Manifest-Icons. /favicon.ico selbst lässt sich nicht umbenennen, da Browser genau diesen Pfad abfragen; hier hilft das Leeren des CDN-Caches.

Im Browser leeren

Chrome und Edge: Öffnen Sie die Icon-URL in einem Tab, drücken Sie Strg+Umschalt+R (Cmd+Umschalt+R auf dem Mac) und laden Sie dann Ihre Seite neu. Icons werden zusammen mit dem Verlauf gespeichert. Bleibt das alte hängen, löschen Sie die Verlaufseinträge der Website oder starten Sie den Browser neu.
Firefox: Das Neuladen der direkten URL funktioniert auch hier. Firefox speichert Icons ebenfalls im Verlauf: Öffnen Sie die Bibliothek, klicken Sie die Website mit der rechten Maustaste an und wählen Sie Forget About This Site.
Safari: Beenden Sie Safari vollständig und öffnen Sie es neu. Auf dem Mac hilft auch Entwickler → Caches leeren (das Menü Entwickler aktivieren Sie unter Einstellungen → Erweitert).

Sinnvolle Cache-Header setzen

Icons ändern sich selten, langes Caching ist also in Ordnung, solange Sie die URL ändern, wenn sich das Icon ändert. Dateien mit Version im Namen oder Parameter können ein Jahr lang gecacht werden:

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

Bei Icons unter festen Pfaden, etwa /favicon.ico, sorgen ein Tag bis eine Woche dafür, dass Besucher nach einem Rebranding nicht monatelang warten:

Cache-Control: public, max-age=604800

Home-Bildschirme und installierte Apps

iOS kopiert das Apple Touch Icon, wenn jemand Ihre Website zum Home-Bildschirm hinzufügt, und aktualisiert es nie. Der Besucher muss die Verknüpfung entfernen und neu hinzufügen. Bei installierten Web-Apps ist es anders: Chrome prüft das Manifest einer installierten App von Zeit zu Zeit und übernimmt ein geändertes Icon. Unter Android fragt es unter Umständen vorher den Nutzer.

Google-Suche

Google aktualisiert das Favicon, wenn es Ihre Startseite neu crawlt, was Tage oder Wochen dauern kann. Beantragen Sie in der Search Console die Indexierung der Startseite, um es anzustoßen. Ändert sich das Icon trotzdem nicht, prüfen Sie es anhand der Favicon-Anforderungen von Google.