---
title: Nuxt Favicon Generator
description: Nuxt already links /favicon.ico on every page, so a fresh project 404s until you add the file. Declaring the rest of the icons in nuxt.config app.head.
canonical: https://favicontools.com/platforms/nuxt-favicon
---

# Nuxt Favicon Generator

Nuxt injects a link to /favicon.ico into every page by default, so a new project logs a 404 for it until you drop a file into public/. The remaining icons are declared in the app.head block of nuxt.config.

## Config, not convention

Nuxt serves public/ from the site root, so public/favicon.ico is available at /favicon.ico with no configuration at all. The default head already links exactly that path, which is why the very first thing a fresh Nuxt project does is ask for an icon you have not created yet.

Everything past that one default is declarative. The app.head section of nuxt.config.ts holds a link array that is rendered into every page, which is the right place for icons because it applies before any route-level head calls run.

## nuxt.config.ts

```ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
        { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },
        { rel: "apple-touch-icon", href: "/apple-touch-icon.png" },
        { rel: "manifest", href: "/manifest.webmanifest" },
      ],
    },
  },
});
```

Paths are root-absolute because they resolve against public/, which is served from the site root.

## Where the files go

```
my-nuxt-app/
  public/  # served from the site root
    favicon.ico  <- add
    favicon-32x32.png  <- add
    apple-touch-icon.png  <- add
    icon-192.png  <- add
    icon-512.png  <- add
    manifest.webmanifest  <- add
  assets/  # bundled and fingerprinted — not for icons
  app.vue
  nuxt.config.ts  # where the tags are declared
```

## Nuxt 3 vs Nuxt 2

### Nuxt 3 (recommended)
Current
- Static files live in public/
- Head config nests under app.head in nuxt.config.ts
- useHead() is available in any component for overrides
- A default /favicon.ico link is present out of the box

### Nuxt 2
End of life
- Static files live in static/, not public/
- Head config is a top-level head key in nuxt.config.js
- Components use the head() option instead of a composable
- Copying a Nuxt 3 config into it silently does nothing

> **Watch for duplicate icon tags:** Your declarations sit alongside Nuxt's default, and a page-level useHead() call can add a third. If the wrong icon is winning, view source on the rendered page and count the link tags before changing anything else — the browser takes the last one it understands.

## Nuxt favicon FAQ

### public/ or assets/?

public/ for anything that must stay at a known URL, which is every icon. assets/ goes through the bundler and comes out with a hashed name, so a request for /favicon.ico would never find it.

### Can I change the favicon per route?

Yes — useHead() in a page can swap the icon, and browsers do follow the change during client-side navigation. The first paint still uses whatever app.head declared, so keep a sensible global default underneath it.

### I upgraded from Nuxt 2 and the favicon disappeared.

Nuxt 2 served static/ and Nuxt 3 serves public/. Move the files across, and move the head configuration from the top-level head key into app.head at the same time, since the old key is ignored.