Favicon for Next.js
Next.js 14+ App Router treats /app/icon.png and /app/favicon.ico as conventions — drop them in and Next emits the right tags automatically.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Place favicon.ico inside /app and Next will serve it at /favicon.ico and inject the link tag.
For multi-size or themed icons, use the file conventions: icon.png, icon.svg, apple-icon.png inside /app. Next generates the <link> tags from the file metadata.
How it works
- 1
Generate favicon.ico
Multi-size 16/32/48/64 from a 512×512 source.
- 2
Place in /app
/app/favicon.ico is auto-served. Add icon.png for HD.
- 3
Verify
Open /favicon.ico in your browser — Next serves it without any config.
Try it now
Generate a Next.js-ready favicon
Favicon GeneratorFAQ
Where do icons go in Next.js App Router?+
Inside the /app directory. The file name (icon, apple-icon, favicon) determines the role.
What about the Pages Router?+
Drop favicon.ico into /public and link it from _document.tsx.
Do I still need a multi-size .ico?+
Recommended for legacy browser support, especially Edge and IE-mode shortcuts.