React-Favicon wird nicht angezeigt? So behebst du es
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.
Der Head ist eine statische Datei, keine Komponente
Der Browser fordert das Favicon an, während er den Head parst, lange bevor React gemountet ist. Der Icon-Link muss also im HTML-Grundgerüst stehen: index.html im Projektstamm bei Vite oder public/index.html bei Create React App.
Zwei Dinge machen es kaputt. Bei Create React App funktioniert ein href, das den Platzhalter %PUBLIC_URL% auslässt, lokal und liefert dann abseits des Domain-Stamms einen 404. In jedem React-Projekt übergibt der Import des Icons aus src es dem Bundler, der es mit einem Content-Hash umbenennt, sodass unter /favicon.ico nichts mehr antwortet.
Der Ursache auf die Spur kommen
- 1
Rufe /favicon.ico direkt auf
Ein 404 bedeutet, dass die Datei unter diesem Pfad nicht ausgeliefert wird: ein Build- oder Pfadproblem. Lädt sie, ist die Datei in Ordnung und das Link-Tag oder der Cache ist das Problem.
- 2
Lies die gebaute index.html
Sieh im Build-Output nach, nicht in deinem Quellcode. Prüfe, ob der Icon-href zu einem echten Pfad aufgelöst wurde und bei CRA %PUBLIC_URL% ersetzt und nicht wörtlich stehen geblieben ist.
- 3
Importiere das Icon nicht mehr aus src
Dateien in public/ behalten ihre Namen und antworten unter festen Pfaden; Importe aus src/ werden gehasht. Ein Favicon muss in public/ liegen.
React-Favicon wird nicht angezeigt: FAQ
Warum wird mein React-Favicon nicht angezeigt?
Fast immer zeigt das Link-Tag in index.html dorthin, wo die Datei nicht liegt, oder das Icon wurde aus src importiert und hat einen gehashten Dateinamen bekommen. Rufe /favicon.ico direkt auf, um zu sehen, ob die Datei unter diesem Pfad überhaupt ausgeliefert wird.
Warum liefert mein Favicon nach dem Deploy in einen Unterpfad einen 404?
Der href wurde gegen den Domain-Stamm statt gegen dein Unterverzeichnis aufgelöst. Setze bei Vite base in vite.config.js; bei Create React App setze das Feld homepage und nutze %PUBLIC_URL% im Template, prüfe dann die gebaute index.html.
Muss ich das Favicon in meinem React-Code importieren?
Nein. Dateien in public/ werden unverändert in den Build-Output kopiert und sind nicht Teil des Modulgraphen. Ein Import erzeugt eine zweite, gehashte Kopie und zerstört den festen Pfad /favicon.ico.