Next.js-Favicon wird nicht aktualisiert? So behebst du es
Die Datei hat sich geändert, der Tab nicht. Bei Next.js ist das einer von drei Caches: der Favicon-Speicher des Browsers, ein veralteter .next-Build oder ein CDN, das die alten Bytes ausliefert. Schließe sie in dieser Reihenfolge aus.
Prüfe zuerst, ob sich die Datei wirklich geändert hat
Bevor du Caches anfasst, rufe /favicon.ico direkt auf. Lädt dort das alte Bild, wurde die neue Datei nie ausgeliefert (ein Build- oder Platzierungsproblem) und kein noch so harter Reload hilft. Behebe das zuerst.
Zeigt die direkte URL das neue Icon, der Tab aber weiterhin das alte, ist es ein echter Cache. Browser cachen Favicons härter als fast jedes andere Asset und halten sie getrennt von der Seite.
Leere die Caches der Reihe nach
- 1
Hard-Reload in einem privaten Fenster
Cmd+Shift+R oder Ctrl+F5, oder ein frisches privates Fenster. Das leert den eigenen Favicon-Speicher des Browsers, den häufigsten Übeltäter.
- 2
Lösche .next und baue neu
Ein veralteter Build kann weiterhin das alte Icon ausgeben. Entferne das Verzeichnis .next und baue neu, damit Next deine app-Verzeichnis-Dateien erneut liest.
- 3
Leere den CDN- oder Plattform-Cache
Auf Vercel oder einem beliebigen CDN kann der Edge nach einem Redeploy das alte /favicon.ico ausliefern. Invalidiere diesen Pfad und öffne dann die direkte URL erneut.
Next.js-Favicon wird nicht aktualisiert: FAQ
Warum wird mein Next.js-Favicon nicht aktualisiert?
Entweder wurde die neue Datei nie ausgeliefert (prüfe /favicon.ico direkt) oder ein Cache hält die alte fest. Browser cachen Favicons aggressiv, und ein veralteter .next-Build oder ein CDN kann nach einem Deploy weiterhin die vorherige Datei ausgeben.
Wie erzwinge ich eine Favicon-Aktualisierung in Next.js?
Im Pages Router hängst du dem Link-href einen Versions-Query-String an. Im App Router geht das nicht, da das Tag erzeugt wird: Ändere die Datei und deploye neu, lösche .next, um einen veralteten Build zu bereinigen, und leere das CDN.
Lokal aktualisiert es sich, aber nicht auf Vercel.
Der Edge-Cache liefert das alte /favicon.ico aus. Prüfe, ob der Deploy die neue Datei tatsächlich enthält, leere dann den Cache oder deploye neu, damit der Edge sie neu abruft, und prüfe die direkte URL in einem privaten Fenster.