Favicon aktualisiert sich nicht? Kümmere dich zuerst um den Cache
Ein Favicon, das sich nicht aktualisiert, ist fast immer ein Cache, kein Bug. Prüfe zuerst, ob die Datei sich wirklich geändert hat, dann leere die Caches von der Datei nach außen.
Prüfe die Datei, bevor du am Browser ansetzt
Favicons werden auf jeder Ebene aggressiv gecacht: im Browser, in deinem CDN und manchmal in einem veralteten Build-Artefakt. Bevor du dem Browser die Schuld gibst, finde heraus, welche Ebene das alte Bild ausliefert.
Geh direkt zur Datei. Öffne https://deineseite.com/favicon.ico in der Adressleiste und schau, was lädt. Ist es das alte Icon, ist nicht dein Browser das Problem, sondern Server oder CDN liefern noch die vorherige Datei aus. Ist es das neue Icon, wurde die Datei sauber ausgeliefert und nur dein Browser-Cache hinkt hinterher.
Arbeite von der Datei nach außen
- 1
Öffne die Icon-URL direkt
Lade /favicon.ico und jeden PNG-Pfad in der Adressleiste. Altes Bild unter der URL bedeutet einen Server-, Build- oder CDN-Cache. Neues Bild unter der URL bedeutet, dass nur dein Browser veraltet ist, spring zu den Browser-Schritten.
- 2
Füge der Tag eine Versions-Query hinzu
Eine Query-String lässt die URL neu aussehen, also holen sich Caches eine frische Kopie. Erhöhe die Zahl jedes Mal, wenn sich das Icon ändert. Das ist die zuverlässigste Lösung für den Browser-Cache.
- 3
Mach einen Hard-Refresh in einem privaten Fenster
Ein privates oder Inkognito-Fenster ignoriert deinen normalen Favicon-Cache. Kombiniere es mit einem Hard-Refresh, damit du die ausgelieferte Datei testest, nicht eine lokale Kopie.
- 4
Leere das CDN und ein veraltetes Build
Ist das alte Bild noch unter der URL, leere die Icon-Pfade in deinem CDN oder Edge-Cache und bestätige dann, dass dein Build die neuen Dateien wirklich kopiert hat. Ein gecachtes Build-Artefakt liefert weiter das alte Icon aus, bis du es leerst und neu baust.
Die Versions-Query
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">Erhöhe ?v= jedes Mal, wenn sich das Icon ändert. Gleicher Dateipfad, neue URL, also behandeln Browser- und CDN-Caches es als frisches Asset.
Häufige Fragen
Warum aktualisiert sich mein Favicon nicht, nachdem ich es geändert habe?
Ein Cache liefert die alte Datei aus. Öffne /favicon.ico direkt: altes Bild dort deutet auf einen CDN- oder Build-Cache, neues Bild dort auf deinen Browser-Cache. Behebe die Ebene, die tatsächlich veraltet ist.
Wie zwinge ich einen Browser, das Favicon neu zu laden?
Füge der Link-Tag eine Versions-Query wie /favicon.ico?v=2 hinzu und erhöhe sie bei jeder Änderung, dann mach einen Hard-Refresh in einem privaten Fenster. Das ist der verlässlichste Weg, den Browser eine frische Kopie holen zu lassen.
Wie lange dauert es, bis sich das Favicon von selbst aktualisiert?
Das hängt von deinen Cache-Laufzeiten ab. Ohne Versions-Query kann es Stunden oder länger dauern, da Browser und CDNs Icons lange festhalten. Eine Versions-Query lässt die Änderung beim nächsten Laden greifen.
Mein Favicon hat sich überall aktualisiert, nur nicht auf dem iOS-Startbildschirm. Warum?
Gespeicherte iOS-Verknüpfungen frieren das Icon zum Zeitpunkt des Hinzufügens ein. Lösche die Verknüpfung und füge die Seite neu hinzu, um das neue apple-touch-icon zu übernehmen.