Vue-Favicon wird nicht angezeigt? So behebst du es
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.
Warum es keine Komponente ist
Der Browser fragt das Favicon beim Parsen des Head an, bevor Vue irgendetwas mountet. Alles, was du aus der App heraus hinzufügst, kommt zu spät, deshalb gehört das Icon in das statische HTML.
Wo dieses HTML liegt, hängt vom Scaffold ab. create-vue (Vite) hält index.html im Projektstamm und kopiert public/ unverändert in den Output. Vue CLI hält das Template unter public/index.html und lässt es durch EJS laufen, URLs brauchen also einen Platzhalter.
Finde den Bruch
- 1
Rufe /favicon.ico direkt auf
Ein 404 bedeutet, dass die Datei unter diesem Pfad nicht ausgeliefert wird. Lädt sie, ist die Datei in Ordnung und das Link-Tag oder ein Cache ist das Problem.
- 2
Stelle fest, welches Scaffold du nutzt
index.html im Stamm bedeutet Vite: nutze /favicon.ico. Ein Template unter public/index.html bedeutet Vue CLI: nutze das Präfix <%= BASE_URL %>.
- 3
Importiere das Icon nicht aus src
Ein importiertes Bild wird gebündelt und gehasht, sodass /favicon.ico nicht mehr aufgelöst wird. Halte Icons in public/ mit unveränderten Namen.
Vue-Favicon wird nicht angezeigt: FAQ
Warum wird mein Vue-Favicon nicht angezeigt?
Das Link-Tag in index.html zeigt dorthin, wo die Datei nicht liegt, oder (bei Vue CLI) fehlt der BASE_URL-Platzhalter, sodass der Pfad abseits des Domain-Stamms bricht. Rufe /favicon.ico direkt auf, um zu sehen, ob die Datei überhaupt ausgeliefert wird.
Kann ich das Favicon aus einer Vue-Komponente setzen?
Du kannst es zur Laufzeit mit useHead austauschen, und der Browser folgt der Änderung nach dem Laden. Aber die erste Anfrage nutzt das, was index.html deklariert hat, halte dort also einen echten Standard bereit.
Warum ist das Favicon verschwunden, nachdem ich es importiert habe?
Der Import eines Bildes aus src übergibt es dem Bundler, der einen gehashten Dateinamen ausgibt. Danach ist unter /favicon.ico nichts mehr erreichbar. Lege die Datei stattdessen in public/.