React-Favicon wird nicht aktualisiert? So behebst du es
Du hast die Datei ausgetauscht und der Tab behielt das alte Icon. In einer React-App cacht der Browser das Favicon, oder der Build-Output und das CDN liefern weiterhin die vorherige Kopie aus public/ aus.
Prüfe die ausgelieferte Datei, dann den Cache
Rufe /favicon.ico direkt auf. Zeigt es weiterhin das alte Bild, hat der Build deine neue Datei nicht übernommen: Der Dev-Server oder der Deploy liefert eine veraltete Kopie aus public/ aus, und den Browser-Cache zu leeren hilft nicht.
Ist die direkte URL korrekt, der Tab aber nicht, ist es der Browser. Favicons werden hart und unabhängig von der Seite gecacht, ein normaler Reload reicht also oft nicht.
Leere ihn der Reihe nach
- 1
Versioniere den Link oder mach einen Hard-Reload
Ändere den href zu /favicon.ico?v=2, damit der Browser sie als neue Datei behandelt, und mach dann einen Hard-Reload in einem privaten Fenster.
- 2
Starte den Dev-Server neu oder baue neu
Dev-Server liefern häufig eine gecachte public/-Datei aus, bis sie neu gestartet werden. In der Produktion baue neu, damit die neue Datei im Output landet.
- 3
Leere das CDN
Sitzt ein CDN vor der Website, invalidiere den Favicon-Pfad, damit die Edge-Knoten die alten Bytes nicht mehr ausgeben.
React-Favicon wird nicht aktualisiert: FAQ
Warum wird mein React-Favicon nicht aktualisiert?
Entweder liefert der Build weiterhin die alte Datei aus (prüfe /favicon.ico direkt) oder der Browser hat sie gecacht. Für Ersteres starte den Dev-Server neu oder baue neu; für Letzteres versioniere die URL und mach einen Hard-Reload.
Wie erzwinge ich, dass das Favicon neu geladen wird?
Hänge dem Icon-href einen Versions-Query-String an, z. B. /favicon.ico?v=2, und mach dann einen Hard-Reload oder öffne ein privates Fenster. Die URL zu ändern ist das, was den Browser eine frische Datei abrufen lässt.
In der Entwicklung hat es sich geändert, aber nicht nach dem Deploy.
Der Deploy liefert eine gecachte Kopie aus dem Build oder CDN aus. Prüfe, ob die neue Datei im Build-Output ist, leere dann den CDN-Pfad und öffne die direkte URL erneut.