Skip to content
Advertisement

Next.js site has favicon in chrome but not in brave

sev

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:

  1. The site has a favicon in chrome but not in brave.
  2. Even if I comment out the above portion the favicon in chrome remains.

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.

Advertisement

Answer

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"
  },
Advertisement