Vite-Favicon wird nicht angezeigt oder 404? So behebst du es
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.
Zwei Asset-Pipelines, von denen du eine willst
Alles, was aus src importiert wird, ist Teil des Modulgraphen: Vite bettet es inline ein oder gibt es mit einem Content-Hash aus und schreibt die Referenz um. Das ist richtig für UI-Bilder und falsch für ein Favicon, das unter einer festen URL antworten muss.
public/ ist der Notausgang. Dateien dort werden nie aufgelöst, gehasht oder inline eingebettet. Sie werden mit unveränderten Namen in den Ausgabestamm kopiert. public/favicon.ico wird also unter /favicon.ico ausgeliefert, und genau das muss der href sein.
Die korrekten Link-Tags
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Root-absolute Pfade, kein public/-Segment. Diese stehen in index.html im Projektstamm, nicht innerhalb von public/.
Vite-Favicon wird nicht angezeigt: FAQ
Warum liefert mein Vite-Favicon nur im Produktions-Build einen 404?
Weil der Pfad über public/ oder über einen Import lief, die sich beide zwischen Dev und Build ändern. Öffne die gebaute index.html und das Ausgabeverzeichnis und prüfe, ob href und Datei übereinstimmen.
Muss ich das Favicon irgendwo importieren?
Nein. Dateien in public/ liegen bewusst außerhalb des Modulgraphen. Importierst du eine, gibt Vite eine zweite gehashte Kopie aus, sodass du zwei Dateien hast, wo du eine wolltest, und unter /favicon.ico nichts.
Das Favicon liefert einen 404, wenn ich unter einem Unterpfad deploye.
Setze base in vite.config.ts. Vite schreibt die Asset-URLs in index.html zur Build-Zeit um, öffne also anschließend die gebaute Datei und prüfe vor dem Ausliefern, dass die Icon-hrefs das Präfix tragen.