Vue Favicon Not Showing? Here's the Fix
A Vue single-file component cannot render a link tag into the head, so the favicon is declared in index.html: at the project root under Vite, inside public/ under Vue CLI. A blank tab means that file's tag is wrong.
Why it isn't a component
The browser asks for the favicon while parsing the head, before Vue mounts anything. Anything you add from inside the app arrives too late, which is why the icon belongs in the static HTML.
Where that HTML lives depends on the scaffold. create-vue (Vite) keeps index.html at the project root and copies public/ to the output untouched. Vue CLI keeps the template at public/index.html and runs it through EJS, so URLs need a placeholder.
Find the break
- 1
Open /favicon.ico directly
A 404 means the file isn't served at that path. If it loads, the file is fine and the link tag or a cache is the problem.
- 2
Confirm which scaffold you're on
Root index.html means Vite: use /favicon.ico. A public/index.html template means Vue CLI: use the <%= BASE_URL %> prefix.
- 3
Don't import the icon from src
An imported image is bundled and hashed, so /favicon.ico stops resolving. Keep icons in public/ with their names intact.
Vue favicon not showing: FAQ
Why is my Vue favicon not showing?
The link tag in index.html points where the file isn't, or (on Vue CLI) the BASE_URL placeholder is missing so the path breaks off the domain root. Open /favicon.ico directly to see if the file is served at all.
Can I set the favicon from a Vue component?
You can swap it at runtime with useHead, and the browser follows the change after load. But the first request uses whatever index.html declared, so keep a real default there.
Why did the favicon vanish after I imported it?
Importing an image from src hands it to the bundler, which emits a hashed filename. Nothing is then reachable at /favicon.ico. Put the file in public/ instead.