I'm working on a Next.js 14 application and occasionally getting the "favicon.ico 404 (Not Found)" error. The strange part is that the favicon.ico file is correctly placed in the public folder and it works.

Has anyone experienced this or knows how to fix it? I've checked the file path, and it seems correct.

Details:

• Next.js version: 14
• The favicon.ico is located in public/favicon.ico
• The app works normally, but at certain times it still returns a 404 error for the favicon in console.

Any help or suggestions are appreciated!

I'm working on a Next.js 14 application and occasionally getting the "favicon.ico 404 (Not Found)" error. The strange part is that the favicon.ico file is correctly placed in the public folder and it works.

Has anyone experienced this or knows how to fix it? I've checked the file path, and it seems correct.

Details:

• Next.js version: 14
• The favicon.ico is located in public/favicon.ico
• The app works normally, but at certain times it still returns a 404 error for the favicon in console.

Any help or suggestions are appreciated!

• reactjs
• next.js

• Are you using the App or Pages router (or both)? – grekier Commented Feb 6 at 14:05
• i'm using app router – Kyst Commented Feb 6 at 16:16
• 1 If you're using the app router, consider moving the favicon.ico file to app/favicon.ico or src/app/favicon.ico. Check the docs for more information regarding the favicon in app router. – moonstar-x Commented Feb 6 at 16:32
• I've already done that, but it still shows the same message. – Kyst Commented Feb 6 at 17:13

2 Answers 2

You probably are placing favicon on the apps root folder but browser goes to the root server folder.

Using favicons is a bit of a mess: depending on the browser and even in which place do you use it (top bar, shortcuts, favorites...) will get it from the path that it want, usually from /favicon.ico (root folder from the server nor the same folder where your app is on). You can bend this by setting link rel entries into the section of your html, but it is even worse: each browser uses a different link rel entry for each purporse (shortcuts, topbar, favorites, etc). For example stackoverflow has the following entries:

<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=...">
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=...">
<link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=..."> 

But I've seen lots of other type of entries and new ones and old ones change with the time... For example this is the "legacy" one:

<link rel="icon" href="/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

favicon thing is the typic non-standarized sh... that you think already fixed until a client comes with a new phone model that requires a new entry type or placing the favicon thing in a different format in a different place. Honestly I stop caring about the favicon until I need to place it on a project. I check some webs and apply to my project.

When it returns the 404, what is the path? The error might be returning from multiple paths, and if it is the icon needs to be in multiple places. Doesn't entirely make sense, but I've dealt with that before.