Where do I put the favicon in a Vue project?

In the public folder of your Vite-based Vue project. Vite copies public/ to the site root verbatim, so files like favicon.ico and site.webmanifest are reachable at / and you reference them from index.html.

Why doesn't editing a Vue component change the favicon?

Vue renders into a mount point and does not manage the document head, so favicon link tags live in index.html, not in a .vue file. Edit index.html (or use a head manager like @vueuse/head) to set icons.

Should favicon files go in public/ or src/assets/ in Vite?

Use public/. Files in src/assets/ get hashed and bundled, so their final URL is unpredictable and /favicon.ico would 404. public/ is copied to the root unchanged, which is exactly what a root favicon needs.

Why is my Vue favicon not updating after a rebuild?

Browser favicon caching. Hard-refresh, open a private window, or confirm the new file actually shipped to dist/. Because public/ files are not hashed, the browser may serve the cached copy at the same URL.

All platforms

Favicon for Vue

How to add a favicon in Vue

To add a favicon in a Vue 3 project (created with Vite), place your icon files in the public folder and reference them with <link> tags in index.html at the project root. Vite copies everything in public/ to the site root verbatim, so /favicon.ico resolves correctly. Vue itself does not manage the document head.

What you need

favicon.ico plus PNG favicons (16/32), a 180x180 apple-touch-icon, and android-chrome 192/512.
The Vite project's public folder (served from the site root /).
A site.webmanifest for Android/PWA and maskable icons, linked from index.html.

Step-by-step: add a favicon in Vue

Generate the icon set first. Run your logo through Logo2Favicon to get favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, and a manifest - all in your browser, nothing uploaded.
Add the files to public/. Copy favicon.ico, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest into the public folder of your Vite project. Vite copies these to the build root untouched.
Reference them in index.html. Open the index.html at your project root (not inside src/) and add the icon link tags inside <head> using root-absolute paths.
Build and verify. Run npm run build and preview. Confirm the tab icon and that /favicon.ico and /site.webmanifest both return 200.

Add to index.html <head> (project root, alongside vite.config):

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Common mistakes to avoid

Putting icons in src/assets/ - Vite hashes and bundles those, so /favicon.ico will 404. Use public/.
Editing App.vue or a component expecting the favicon to appear; Vue does not control the document head.
Leaving Vite's default favicon.ico in public/ and only swapping the link tag, so the old icon still ships.
Forgetting the manifest, so Android home-screen and PWA installs fall back to a generic glyph.

Free forever, no sign-up

Generate a complete icon set for Vue

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Vue. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in a Vue project?: In the public folder of your Vite-based Vue project. Vite copies public/ to the site root verbatim, so files like favicon.ico and site.webmanifest are reachable at / and you reference them from index.html.
Why doesn't editing a Vue component change the favicon?: Vue renders into a mount point and does not manage the document head, so favicon link tags live in index.html, not in a .vue file. Edit index.html (or use a head manager like @vueuse/head) to set icons.
Should favicon files go in public/ or src/assets/ in Vite?: Use public/. Files in src/assets/ get hashed and bundled, so their final URL is unpredictable and /favicon.ico would 404. public/ is copied to the root unchanged, which is exactly what a root favicon needs.
Why is my Vue favicon not updating after a rebuild?: Browser favicon caching. Hard-refresh, open a private window, or confirm the new file actually shipped to dist/. Because public/ files are not hashed, the browser may serve the cached copy at the same URL.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.