Guide · favicon
How to add a favicon in Next.js App Router
October 23, 2026 · 9 min read
Next.js App Router can pick up favicon.ico from the app/ directory on its own. Multi-size PNGs and apple-touch-icon are clearer when you declare them in metadata.icons. This walks through both approaches, where files should live, and how to avoid a broken icon set after a redeploy.
File-based favicon.ico
Put favicon.ico in app/ next to layout.tsx. Next.js serves it on /favicon.ico with no Metadata fields. That alone fixes a blank tab for many apps.
File conventions get awkward when you also need 32×32 PNG, SVG, and apple-touch-icon with explicit sizes. For anything beyond a single ICO, use the Metadata API, or put PNGs in public/ and point metadata at them.
Metadata API for PNG, Apple, and manifest
In app/layout.tsx, export metadata (or generateMetadata) with an icons field. Use icon for favicon.ico and PNGs, apple for the 180×180 touch icon, and manifest if you ship a PWA.
Paths are URL paths from the site root. Files in public/icons/ become /icons/favicon-32x32.png. Keep Metadata paths and files in sync: a missing PNG still returns 200 for the page while the tab icon breaks.
- icon: favicon.ico (sizes any) + 32×32 PNG
- apple: 180×180 apple-touch-icon.png
- manifest: /manifest.webmanifest when installable
- themeColor: match your splash / brand fill
Example metadata block
A minimal icons config uses an icon array with /favicon.ico and /favicon-32x32.png, an apple array with /apple-touch-icon.png, and an optional manifest path. The Next.js favicon tool page has a snippet you can copy after generating the files.
app/ versus public/
favicon.ico in app/ is convenient. Multiple PNGs are often easier in public/ so designers can drop replacements without touching the App Router tree. Pick one convention per repo and note it in the README so the next person does not leave orphans in both places.
Generate, then paste
Export the pack from the favicon generator (or the Next.js preset). Drop files into app/ or public/, paste the metadata snippet into the root layout, hard-refresh once, and confirm Network shows 200 for the new icons. Favicon caches are aggressive.