How to add a favicon in Nuxt

What you need

• favicon.ico plus PNG favicons (32x32), a 180x180 apple-touch-icon, and 192/512 PWA icons.
• The public folder, which Nuxt serves from the site root.
• An app.head config in nuxt.config.ts (or useHead in app.vue) to declare the icon link tags.

Step-by-step: add a favicon in Nuxt

1. Generate your icon set. Use Logo2Favicon to create favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, a maskable icon, and the manifest - in-browser, nothing uploaded.
2. Add the files to public/. Copy favicon.ico, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest into the public folder. Nuxt serves these from /.
3. Declare the link tags. In nuxt.config.ts, add the icons under app.head.link, or call useHead in app.vue with the same link array. Nuxt injects them into the head site-wide.
4. Build and verify. Run nuxt build (or nuxt dev) and confirm the tab icon and that /favicon.ico and /site.webmanifest return 200.

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
});

Common mistakes to avoid

• Putting icons in assets/ instead of public/ - assets/ is bundled and hashed, so /favicon.ico 404s.
• Declaring the link tags in one page's useHead instead of nuxt.config or app.vue, so only that page gets them.
• Duplicating tags by setting them both in nuxt.config and a page-level useHead.
• Forgetting the manifest, so Android home-screen and PWA installs fall back to a generic glyph.

Frequently asked questions

Where do I put the favicon in a Nuxt 3 project?

In the public folder, which Nuxt serves from the site root, so public/favicon.ico becomes /favicon.ico. Declare the link tags via app.head in nuxt.config.ts or with useHead in app.vue.

How do I set favicon link tags in Nuxt?

Add them to app.head.link in nuxt.config.ts for a site-wide default, or call useHead with a link array in app.vue. Nuxt merges and injects the tags into the document head for every route.

Why does my Nuxt favicon 404?

The file is probably in assets/ (which Nuxt bundles and hashes) rather than public/. Move it to public/ so it is served verbatim at the root, and confirm the link href matches the filename.

Should favicon files go in public/ or assets/ in Nuxt?

Use public/. Files in assets/ are processed by the bundler and get hashed URLs, breaking the predictable /favicon.ico path. public/ is copied to the root unchanged, which is what a root favicon needs.

Favicon guides for other platforms

• Add a favicon in WordPress
• Add a favicon in Shopify
• Add a favicon in Wix
• Add a favicon in Squarespace

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