Favicon for Vue.js
Vue apps ship static assets from /public (Vite) or /public (Vue CLI). Place favicon.ico there and reference it in index.html — the dev server and production build serve it at the site root.
Vite: put favicon.ico in /public/favicon.ico. Add <link rel="icon" href="/favicon.ico"> in index.html inside <head>.
For hashed builds, root-level /favicon.ico does not get a content hash — ideal for stable browser requests.
Vue CLI uses the same public/ convention. Replace the default public/favicon.ico with your multi-size file.
Add PNG and apple-touch-icon links for mobile. Keep paths absolute (/apple-touch-icon.png) so vue-router history mode does not break nested routes.
When deploying to Netlify or Vercel, ensure favicon files are included in the dist output — they copy from public/ automatically.
For vite-plugin-pwa, declare icons in the manifest section of vite.config.ts — 192×192 and 512×512 PNG entries.
How it works
- 1
Copy icons to public/
favicon.ico, apple-touch-icon.png, optional favicon.svg.
- 2
Edit index.html
Add <link rel="icon"> and apple-touch-icon tags.
- 3
Build and deploy
Confirm /favicon.ico returns 200 on production.
Try it now
Generate Vue favicon assets
Favicon GeneratorFAQ
Why does Vue dev server show the Vite logo?+
Replace public/favicon.ico and restart the dev server.
Where do SVG favicons go in Vue?+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> in index.html.
Does vue-router affect favicon paths?+
Only if you use relative hrefs — always use root-relative / paths.