Favicon for Nuxt
Nuxt 3 serves static files from /public at the site root. Configure <link> tags in nuxt.config.ts under app.head.link for a centralized, SSR-friendly favicon setup.
Place favicon.ico in public/favicon.ico — Nuxt serves it automatically without extra config.
In nuxt.config.ts, extend app.head.link with icon entries: { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }.
Use useHead() in a layout only when icons vary per route — most sites set global icons once in nuxt.config.
For @nuxtjs/seo or site config modules, follow their favicon field if present — it wraps the same link tags.
Nuxt Image does not process favicons; upload final sizes to public/.
When using Nitro preset static hosting, verify favicon paths exist in .output/public after nuxi generate.
How it works
- 1
Add files to public/
favicon.ico, PNG sizes, optional SVG.
- 2
Configure app.head.link
Centralize icon links in nuxt.config.ts.
- 3
Generate and inspect HTML
View source on a deployed page for correct tags.
Try it now
Build your Nuxt icon package
Favicon Package GeneratorFAQ
Nuxt still shows the default icon — why?+
Clear .nuxt cache, replace public/favicon.ico, and restart dev server.
How do I add apple-touch-icon in Nuxt 3?+
Add { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' } to app.head.link.
Does SSR duplicate favicon tags?+
Avoid defining the same link in both nuxt.config and a page-level useHead call.