Next.js Favicon Not Showing? Here's the Fix
In the App Router, Next.js builds the icon links from files in the app directory. Miss the filename and it emits nothing. In the Pages Router there is no convention at all. Work out which one you're hitting and the fix is obvious.
Which router are you on?
The App Router reads files named favicon.ico, icon, and apple-icon from the app directory, works out their size, and injects the link tags at build time. If the file is mis-named or sits in the wrong folder, no tag is emitted. There is no error, just a blank tab.
The Pages Router has no such convention. Nothing appears unless you place the files in public and declare the link tags yourself in a custom head. A project half-migrated between the two is the classic reason a favicon works on one route and not another.
Where the file has to live
| File | Router | What Next.js does |
|---|---|---|
| app/favicon.ico | App Router | Served at /favicon.ico, tag injected automatically |
| app/icon.png | App Router | Sized and linked automatically at build |
| public/favicon.ico | Pages Router | Only appears if you add the link tag by hand |
Confirm it in thirty seconds
- 1
Open the icon URL directly
Load /favicon.ico (or /icon) in a new tab. A 404 means the file isn't where Next expects it: a build problem, not a cache one.
- 2
View source and search for rel="icon"
No icon link in the head means the file convention never fired. Check the filename matches exactly: favicon.ico, icon.png, apple-icon.png.
- 3
Rule out the cache last
Only once the file resolves and the tag is present should you hard-refresh in a private window. Nine times out of ten the problem was upstream of the cache.
Next.js favicon not showing: FAQ
Why is my Next.js favicon not showing?
In the App Router, because the file is mis-named or not in the app directory, so no link tag is generated. In the Pages Router, because there is no automatic convention and you haven't added the tags in a custom head. Open /favicon.ico directly. A 404 confirms it's a file/placement problem.
Do I need favicon.ico if I have app/icon.png?
Keep both. icon.png covers modern browsers at higher quality; favicon.ico is what older browsers, feed readers, and some link-preview crawlers still request by path.
Why does the favicon show on one page but not another?
Usually a project mixing App Router and Pages Router. The app directory convention only covers routes rendered by it; Pages Router routes need their own link tags in _document or a custom head.