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

user_9004739 0
Viewed 15036

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
vercel next.js reactjs favicon html
6 Answers

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>
user_131789300

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.

user_122695820

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.

user_130514980

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).

user_85609600

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

I changed it to:

.
├── next.config.js
├── public
│   ├── favicon.ico
│   └── img
└── src
    ├── pages
    └── styles

(moved public/ to the root .)

user_137745990

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" />
user_151134910
Related