Favicon for Nuxt
Nuxt serves static files from /public at your site root, so /public/favicon.ico becomes /favicon.ico automatically. For multi-size or SVG icons, add link tags via nuxt.config.ts or useHead() in app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Create your favicon pack with the Favicon Generator — export favicon.ico, favicon.svg, and apple-touch-icon.png from a 512×512 source. Drop them into your Nuxt project's /public folder.
Nuxt 3 serves everything in /public at the domain root with no extra config. Browsers request /favicon.ico by default, so placing the file there covers the most common case.
For explicit control over every icon variant, add link tags in nuxt.config.ts under app.head.link — or call useHead({ link: [...] }) in app.vue. Both approaches inject tags into every page's <head>.
After deploying, open your production URL in a private window and run the Favicon Checker to confirm /favicon.ico and your <link rel="icon"> paths return 200. Cached dev icons are a common reason a Nuxt favicon is not showing after deploy.
If the tab icon works but Google Search still shows a blank favicon, verify your live homepage links a square icon of at least 48×48. See our Google favicon requirements guide for crawl and size rules.
Nuxt does not auto-generate multi-size .ico files — you must supply them. Use PNG fallbacks linked in app.head for PWA install prompts and high-DPI tabs.
How it works
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Add to /public
Copy favicon.ico (and optional favicon.svg, apple-touch-icon.png) into your Nuxt /public folder.
- 3
Configure and verify
Add app.head.link entries in nuxt.config.ts if needed, deploy, then run the Favicon Checker on your live URL.
Try it now
Generate a Nuxt-ready favicon
Favicon GeneratorFAQ
How do I add a favicon in Nuxt 3?+
Place favicon.ico in /public, then optionally add <link rel="icon"> tags in nuxt.config.ts under app.head.link or via useHead() in app.vue.
Where does the favicon go in a Nuxt project?+
The /public directory. Files there are served from your domain root — /public/favicon.ico is available at /favicon.ico.
Why is my Nuxt favicon not showing?+
Common causes: file not in /public, wrong path in app.head, browser cache from dev, or checking localhost instead of the deployed URL. Test in an incognito window.
Should I use nuxt.config.ts or useHead() for favicons?+
Either works. nuxt.config.ts is best for static site-wide icons; useHead() in app.vue if icons depend on runtime state or per-route logic.
Can I use an SVG favicon in Nuxt?+
Yes — place favicon.svg in /public and add { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } to app.head.link.