How to add a favicon in Next.js

In the Next.js App Router you don’t write favicon tags at all: name the files correctly, put them in app/, and Next.js generates the <link> tags.

Steps

App Router: put favicon.ico directly in app/ (it must be at the root of app, not in a route segment).
Rename favicon.svg to icon.svg and apple-touch-icon.png to apple-icon.png, and put both in app/. Next.js reads them and adds rel="icon" and rel="apple-touch-icon" tags with the right type and sizes.
Copy the android-chrome PNGs and maskable icons into public/, and either keep site.webmanifest in public/ and set manifest: "/site.webmanifest" in the metadata export of app/layout, or create app/manifest.ts.
Delete the default app/favicon.ico from create-next-app if you are replacing it, then restart the dev server: icon files are picked up at build time.

File to use: favicon.ico, favicon.svg (rename to icon.svg), apple-touch-icon.png (rename to apple-icon.png), and the Android PNGs + site.webmanifest. Make it with the favicon generator (free, no signup).

Code

app/layout.tsx (only needed for the manifest and theme colour)

import type { Metadata, Viewport } from 'next'

export const metadata: Metadata = {
  manifest: '/site.webmanifest',
}
export const viewport: Viewport = {
  themeColor: '#e8590c',
}

Good to know

Pages Router: copy every file into public/ and add the link tags inside <Head> in pages/_document.tsx.
You can also generate icons in code with app/icon.tsx and ImageResponse, but static files are simpler and cache better.
If the old Vercel triangle icon keeps showing, it is the browser cache: open /favicon.ico directly and hard-refresh.

Check it worked

Run the favicon checker on your live URL to confirm every icon loads and Google has a usable size. If the old icon keeps showing, see favicon not showing. The full tag-by-tag explanation is in how to add a favicon.

Other platforms: WordPress · Shopify · Squarespace · Wix · React · Webflow · Astro · Django

Questions people ask

Where do I put the favicon in Next.js?

With the App Router, in the app/ folder: favicon.ico, icon.(svg|png|ico) and apple-icon.png. Next.js generates the head tags. With the Pages Router, in public/, with the tags added in _document.

Why is my Next.js favicon not updating?

Restart next dev after adding or renaming icon files, make sure favicon.ico is at the root of app/ (not inside a route group), remove any duplicate favicon in public/, and hard-refresh the icon URL to clear the browser cache.

Can I use an SVG favicon in Next.js?

Yes. Name it icon.svg in the app/ folder. Keep favicon.ico too, for browsers and tools that request /favicon.ico directly.