Ein Favicon reparieren, das nicht angezeigt oder aktualisiert wird

Im App Router baut Next.js die Icon-Links aus Dateien im app-Verzeichnis. Stimmt der Dateiname nicht, wird gar nichts ausgegeben. Im Pages Router gibt es überhaupt keine Konvention. Finde heraus, welchen Fall du hast, und die Lösung liegt auf der Hand.

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.

React rendert in einen DOM-Knoten und fasst den Head nie an, das Favicon steckt also in einer statischen HTML-Datei. Ein leerer Tab bedeutet, dass das Link-Tag in dieser Datei falsch ist oder das Icon aus src importiert wurde und nicht mehr unter einem festen Pfad liegt.

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.

Vite kopiert public/ in den Ausgabestamm und schreibt index.html zur Build-Zeit um. Ein Favicon, das in der Entwicklung funktioniert und in der Produktion einen 404 liefert, hat fast immer das Segment public/ im Pfad oder wurde aus src importiert und gehasht.

Eine Vue-Single-File-Komponente kann kein Link-Tag in den Head rendern, das Favicon wird also in index.html deklariert: im Projektstamm bei Vite, in public/ bei Vue CLI. Ein leerer Tab bedeutet, dass das Tag in dieser Datei falsch ist.

Angular kopiert statische Dateien nur, wenn die Build-Konfiguration es vorgibt. Ein Icon, das nicht vom assets-Eintrag in angular.json erfasst wird, erreicht dist nie. Der Build gelingt und die Datei ist nicht da.

Astro kopiert public/ unverändert in den Output, fügt aber nie Icon-Tags für dich ein. Ein leerer Tab bedeutet, dass der Link nicht im Layout deiner Seiten steht oder eine Seite ihr eigenes html-Element gerendert und das Layout übersprungen hat.

WordPress liefert ein Favicon nicht aus einer Datei aus, die du ins Theme legst. Es gibt die Icon-Tags aus einer einzigen Website-Icon-Einstellung aus, und ein leerer Tab bedeutet fast immer, dass diese Einstellung nie angewendet wurde oder ein Theme dagegen arbeitet.

Du hast ein neues Website-Icon gesetzt und das alte rührt sich nicht. Bei WordPress ist das fast immer eine Caching-Schicht (ein Page-Cache-Plugin oder CDN, das veraltetes HTML ausliefert), mit dem eigenen Favicon-Cache des Browsers als zweitem Verdächtigen.

Bei Shopify ist das Favicon eine Theme-Einstellung, keine Datei auf einem Server. Das Theme rendert einen Icon-Link aus einem Bild, das du im Editor auswählst, ein leerer Tab bedeutet also: nicht gesetzt, das falsche Theme bearbeitet oder das Format abgelehnt.

Du hast ein neues Favicon ausgewählt und der Live-Shop zeigt weiterhin das alte. Bei Shopify ist das fast immer ein Entwurfs-Theme, das nie veröffentlicht wurde, oder das Bild-CDN und der Browser, die das vorherige Icon cachen.