App Router: files, not link tags
In the App Router, Next.js looks for icon files by name in app/ and generates the <link> tags itself. Files left in public/ are served, but nothing links to them. The package uses standard web names, so a few are renamed on the way in:
| from the zip | goes to |
|---|---|
favicon.ico | app/favicon.ico |
icon.svg | app/icon.svg |
apple-touch-icon.png | app/apple-icon.png |
manifest.webmanifest | app/manifest.webmanifest |
icon-192.png · icon-512.png · icon-mask.png | public/ (the manifest points at them by URL) |
favicon-96x96.png | public/favicon-96x96.png, linked yourself |
No <head> edits are needed for the renamed files. Keep favicon.ico in the root of app/, not in a route segment, so it answers at /favicon.ico.
Linking the Google 96px icon
Next.js has no filename convention for the 96px PNG Google Search prefers, so it stays in public/ and needs one tag. Put it in the root layout:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
</head>
<body>{children}</body>
</html>
)
}The metadata API
The icons field of the metadata export can declare icons instead of files. File-based icons take priority over it, so pick one approach. The file convention is simpler and is what the generated favicon-setup.md describes.
Pages Router
The Pages Router has no icon conventions. Put every file from the zip in public/ and add the full snippet inside <Head> in pages/_document.tsx:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Questions
Why does my Next.js favicon not change?
create-next-app ships its own app/favicon.ico. Replace that file rather than adding a new one to public/, then hard-reload, since browsers cache favicons aggressively.
Should the icons go in app/ or public/?
In the App Router, the tab icons go in app/ under their Next.js names. The PWA PNGs referenced by the manifest stay in public/.
Do I rename apple-touch-icon.png?
Yes, to app/apple-icon.png. That is the name Next.js recognizes for the Apple touch icon.