I'm developing my first next.js site and I'm setting the favicon in index.js as follows:
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
Originally I was using a setup where my source files were all in the root directory. I now decided to move them to a src directory. Since then I have observed the following two weird behaviors:
The favicon is stored in the public folder which is in the root directory (did not change anything about that) when moving the other files to src.
You need to remove your cache for the new route of the favicon to be recognized.
To prevent this in the future you could add a removal of the .next directory to remove the cache, example:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
"clean": "rm /_next && next start"
},