'Why is my favicon not working in my next js app?

For some reason my favicon is not working.

I have the favicon saved as favicon.ico in the /public directory and am referencing it in the <Head> of my pages (located in the /pages directory) but to no avail.

Can anyone help?

-

Here is my code for my index.js:

  <Head>
      <title>Create Next App</title>
      <link rel="icon" href="/favicon.ico" />


dir/pages/index.js
dir/public/favicon.ico
htmlreactjsnext.jsfaviconvercel


Solution 1:[1]

Put the favicons in an /image directory inside the /public directory and put the code below in your _app.js

<Head>
          <link rel="shortcut icon" href="/images/favicon.ico" />
          <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
          <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
</Head>

Solution 2:[2]

I was facing exactly the same issue as you did. It seems it is necessary to put the image file in /public/images/

It turns to work properly once I have done this.

Solution 3:[3]

It is possible that the .ico image was incorrectly created - perhaps converted online from a .png. This will cause the image to be viewable in the browser and elsewhere but unable to be used as a favicon.

In order to trouble shoot, try using a .png instead of .ico and see if the issue persists. If this solves your problem, consider using a converter targeted specifically for favicons, i.e. https://favicon.io/favicon-converter/

In my case, the file was in the correct place (/public/favicon.ico), was being referenced properly (href="/favicon.ico"), and was served when visiting http://localhost:3000/favicon.ico, yet it did not display in the browser tab until I reconverted it.

Solution 4:[4]

Only helpful if you are running into issues while using next basePath:

I was running into an issue where my favicon was not showing up. In my case it was because I was using basePath: '/some-base-path' in my next config. When you add a basePath it changes the path to the static assets.

Example: A basePath of /test with an image at public/favicon.ico can be referenced at /test/public/favicon.ico

Debugging note: I also had to clear my cache to see the changes (or try incognito).

Solution 5:[5]

remove / from: /favicon.ico and your image should load if the format ico works. If it do not work convert the .ico image to .png or .jpg.

<link rel="icon" href="favicon.ico" />

Solution 6:[6]

In my case, I had public/ in the src/ directory.

I changed it to (moved public/ to the root .):

.
??? next.config.js
??? public
?   ??? favicon.ico
?   ??? img
??? src
    ??? pages
    ??? styles

Solution 7:[7]

Place the favicon it in the root of your public folder then add the favicon in next/head tag.

<Head>
   <link rel="icon" href="/favicon.ico" />
</Head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Eric Lee
Solution 3 joematune
Solution 4 nick vanderkolk
Solution 5 Filip Huhta
Solution 6 nezort11
Solution 7

Related Questions