Where do I put the favicon in a Next.js App Router project?

Place app/favicon.ico, app/icon.png, and app/apple-icon.png directly inside the app directory. Next.js detects them and generates the correct link tags automatically.

How do I add an Apple touch icon in Next.js?

Add app/apple-icon.png (180x180) to your app directory, or set icons.apple in your metadata export. Next.js renders the apple-touch-icon link tag for you.

How do I set up PWA icons in Next.js?

Create app/manifest.ts (or manifest.webmanifest) that lists your 192x192, 512x512, and maskable 512 icons. Next.js automatically links the manifest in the head.

Should I use the public folder or app directory for favicons?

Prefer the app directory file conventions or metadata icons, which deduplicate tags and version assets. Use public only for files you reference by absolute path yourself.

All platforms

Favicon for Next.js

How to add a favicon in Next.js

To add a favicon in Next.js (App Router), place an icon file directly in your app/ directory - app/favicon.ico, app/icon.png, and app/apple-icon.png - and Next.js automatically generates the correct <link> tags. For full control, export an icons object from your metadata instead.

What you need

favicon.ico plus PNG icons (at least 32x32) and a 180x180 apple-icon.
android-chrome 192/512 and a maskable 512 referenced from a web manifest.
A manifest.ts route or manifest.webmanifest in app/ for PWA icons.

Step-by-step: add a favicon in Next.js

Add file-convention icons. Drop app/favicon.ico, app/icon.png (e.g. 32x32) and app/apple-icon.png (180x180) into your app directory. Next.js auto-generates the link tags - no markup needed.
Add a manifest for PWA icons. Create app/manifest.ts (or manifest.webmanifest) listing your 192, 512, and maskable 512 icons. Next links it automatically.
Or use metadata icons for explicit control. Export a metadata object from app/layout.tsx with an icons field to control exact paths, sizes, and types.
Verify the rendered head. Run the dev server and inspect the <head> to confirm the icon and apple-touch-icon link tags and the manifest link are present.

Explicit metadata icon control in app/layout.tsx:

export const metadata = {
  icons: {
    icon: [{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' }],
    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
  },
  manifest: '/site.webmanifest',
};

Common mistakes to avoid

Putting icons in public/ and also using file conventions, producing duplicate tags.
Naming the file icon.png but expecting an Apple touch icon - use apple-icon.png for that.
Hard-coding theme-color in a metadata export instead of the separate viewport export in modern Next.
Forgetting the manifest, so Android home-screen and PWA install prompts fall back to a generic glyph.

Free forever, no sign-up

Generate a complete icon set for Next.js

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 Next.js. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in a Next.js App Router project?: Place app/favicon.ico, app/icon.png, and app/apple-icon.png directly inside the app directory. Next.js detects them and generates the correct link tags automatically.
How do I add an Apple touch icon in Next.js?: Add app/apple-icon.png (180x180) to your app directory, or set icons.apple in your metadata export. Next.js renders the apple-touch-icon link tag for you.
How do I set up PWA icons in Next.js?: Create app/manifest.ts (or manifest.webmanifest) that lists your 192x192, 512x512, and maskable 512 icons. Next.js automatically links the manifest in the head.
Should I use the public folder or app directory for favicons?: Prefer the app directory file conventions or metadata icons, which deduplicate tags and version assets. Use public only for files you reference by absolute path yourself.

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.