Next.js 16 · App Router

How to Add a Favicon in Next.js (App Router)

Q: Where does the favicon go in Next.js?

app/favicon.ico. It only works in the root app/ folder.

Q: Can I use an SVG favicon in Next.js?

Yes, as app/icon.svg. Keep favicon.ico too for browsers and Google, which don't use SVG.

Short answer

Put favicon.ico directly in app/. Next.js adds the <link> tags for you. Add app/icon.png (or .svg) and app/apple-icon.png for sharper icons and the iPhone home screen. No <head> code needed.

Checked against Next.js: favicon, icon and apple-icon in October 2026.

Files

File	Types	Where	Output
`favicon`	`.ico`	`app/` only	`<link rel="icon" href="/favicon.ico" sizes="any">`
`icon`	`.ico` `.jpg` `.png` `.svg`	`app/*/`	`<link rel="icon">` with type and sizes
`apple-icon`	`.jpg` `.png`	`app/*/`	`<link rel="apple-touch-icon">`

project

app/
├── favicon.ico      32×32 (+16, 48) ICO
├── icon.svg         or icon.png, e.g. 512×512
├── apple-icon.png   180×180
└── layout.tsx

Several icons: icon1.png, icon2.png… sorted by name.
A 32×32 PNG gets type="image/png" and sizes="32x32" automatically.
SVG icons get sizes="any".

Generate the icon with code

app/icon.tsx

import { ImageResponse } from "next/og";

export const size = { width: 32, height: 32 };
export const contentType = "image/png";

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "black",
          color: "white",
          fontSize: 24,
        }}
      >
        A
      </div>
    ),
    { ...size },
  );
}

You can't generate favicon with code; use icon or a favicon.ico file.

Pages Router

Put the files in public/ and link them in pages/_document.tsx:

pages/_document.tsx

<Head>
  <link rel="icon" href="/favicon.ico" sizes="32x32" />
  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</Head>

Next.js favicon not showing: fixes

You see	Why	Fix
Still the Next.js logo	`create-next-app` ships `app/favicon.ico`	Replace that file, not one in `public/`
Favicon in a nested folder ignored	`favicon` only works in the root `app/`	Move it to `app/`, or use `icon` for nested routes
Two favicons fight	`/favicon.ico` in both `app/` and `public/`	Keep only `app/favicon.ico`
Old icon in the tab	Browser favicon cache	Hard reload or open a private window
No icon in Google results	Google crawls on its own schedule	See favicon not showing in Google

FAQ

Where does the favicon go in Next.js?

app/favicon.ico. It only works in the root app/ folder.

Can I use an SVG favicon in Next.js?

Yes, as app/icon.svg. Keep favicon.ico too for browsers and Google, which don't use SVG.

Do I need to add link tags?

No. With the App Router, Next.js adds them from the files.

What size should apple-icon.png be?

180×180 px.