Next.js Favicon Generator
Next.js resolves icons from files rather than from link tags you write by hand. Put the right filename in the right directory and the framework emits the markup for you.
How Next.js resolves icons
In the App Router, any file named icon, apple-icon, or favicon in the app directory becomes an icon route. Next.js reads the file, works out the dimensions, and injects the matching link tag into the document head at build time. You do not write the link tags yourself.
The Pages Router has no such convention. There you place files in public and declare them in a custom Head, which is the same manual work as any other framework.
Where the files go (App Router)
- app/
- favicon.icoaddbrowser tabs, legacy
- icon.pngadd512x512 source
- apple-icon.pngadd180x180, iOS
- layout.tsx
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
Files marked add are the ones our generator exports. Everything else is a stock Next.js project.
What each file does
| File | Purpose | Consumed by |
|---|---|---|
| app/favicon.ico | Multi-resolution tab icon | All browsers, RSS readers |
| app/icon.png | Primary PNG icon, scaled by Next.js | Modern browsers |
| app/apple-icon.png | Home screen icon, 180x180 | iOS Safari |
| public/manifest.json | Install metadata and icon list | Android, PWA installs |
Design for the smallest size first
Linking the manifest
// app/layout.tsx
export const metadata = {
manifest: "/manifest.json",
};Icons themselves need no metadata entry: the file convention covers them. The manifest is the one thing you still declare.
Next.js favicon FAQ
Why is my Next.js favicon not updating?
Browsers cache favicons aggressively and separately from the page. Hard-refresh, then confirm the file itself changed by opening /favicon.ico directly. If the old icon still loads there, the build didn't pick up your file.
Do I need favicon.ico if I have icon.png?
Keep both. icon.png covers modern browsers at higher quality, while favicon.ico is what older browsers, feed readers, and some link-preview crawlers still request by path.
Where does apple-icon.png go?
Directly in the app directory, as a 180x180 PNG. Next.js generates the apple-touch-icon link tag from it. iOS ignores transparency, so give it a solid background.
Next.js favicon not working?
The two ways it fails on Next.js, and the exact cause of each.