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

Question

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

Are you trying to see it locally or through a hosted online service? — tomerpacific, May 16 '20 at 12:47
I'm trying to see it locally. But it doesn't work when I deploy it to Vercel's Now either — atman_lens, May 16 '20 at 12:49
I would try to replace your relative path to the icon to the actual path (locally) and see if it works locally. Also add the type attribute ```type="image/x-icon"```. — tomerpacific, May 16 '20 at 12:52
Nope, that's not working. Could it be because I am repeating the component with the tag on each page (index.js, whats-on.js etc.) instead of just creating a single component that contains the ? — atman_lens, May 16 '20 at 12:55
What's the exact problem, that the icon is unreachable through the web server or that the browser is not fetching it and using it in the expected locations? — Álvaro González, May 16 '20 at 13:03
Are they all located in the same directory relative to the path to the favicon? Can you try just having one page with the reference to the favicon and seeing if that works? — tomerpacific, May 16 '20 at 13:04
I'm not sure if it is unreachable or if the browser is fetching it. How do I find that out? Next js is meant to automatically direct image urls to the /public directory. I'm actually using an official next.js template which already referenced its own favicon.ico (which I replaced with mine) but even before I did anything to the app the favicon wasn't working. I've tried the path '../public/favicon.ico' despite Next being meant to automatically direct it but that's not working either. — atman_lens, May 16 '20 at 13:14
To determine if the favicon is reachable you can try to load it in your browser. Type the URL in the location bar (that bar on top where you type google queries). To determine if the browser is recognising it as favicon you can check whether it shows up in the page tab. — Álvaro González, May 16 '20 at 13:45
It's reachable at /favicon.ico as expected (not /public/favicon.ico) — atman_lens, May 16 '20 at 13:48

infecting · Answer 1 · 2021-10-28T16:54:01.000

39

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>

edited Oct 28 '21 at 16:54

answered May 04 '21 at 16:33

infecting

523
6
10

3

I confirm this. – Greg Forel Aug 12 '21 at 07:17
1

This worked for me I was migrating from the next js version 8 to 11 and this works. – anup Aug 18 '21 at 19:27
7

Why is this necessary? It fixed my issue however I've noticed the Next.js boilerplate project does not do this and it seems to work there ... – sambecker Dec 09 '21 at 05:19
1

It works in _document.js too. – francis Feb 15 '22 at 20:49
My favicon was working perfectly on every other page except the 404 page. This worked for me and I don't know why? @sambecker have you discovered why this configuration works this way? Quite weird. – Victor Eke Jul 21 '22 at 11:28
I’m not sure @Eke but in case it helps, one of the mistakes I made was using a convenience component within `
`. Apparently all links must be direct descendants of `
`.
– sambecker Jul 23 '22 at 03:10
I just added it to a /public/image folder without adding any code to and it worked for me on next 12.2.3 – skpn Aug 25 '22 at 07:59
1

They asked why it works this way, although the react documentation does not say about it. I found an article about favicon. Explain their logic and browser support and why so. --> https://css-tricks.com/favicon-quiz/ – al-bulat Dec 21 '22 at 09:53

score 13 · Answer 2 · answered Mar 29 '21 at 10:59

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.

score 10 · Answer 3 · answered Aug 05 '21 at 12:49

10

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.

answered Aug 05 '21 at 12:49

Eric Lee

171
2
10

score 8 · Answer 4 · answered Nov 11 '21 at 16:32

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

nezort11 · Answer 5 · 2022-06-13T15:53:27.307

3

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

edited Jun 13 '22 at 15:53

answered May 01 '22 at 18:28

nezort11

326
1
4
11

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 02 '22 at 02:37
For Next.js 11 (11.1.4) this solution worked both in dev and production (AWS Amplify). – Rick Jun 07 '22 at 09:47

score 1 · Answer 6 · answered Apr 24 '23 at 05:53

1

while building your app for production, just cut favicon.ico from root and paste into public folder.

answered Apr 24 '23 at 05:53

Ahmed Siddiqui

21
1
3

score 0 · Answer 7 · answered Mar 29 '21 at 11:01

0

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

answered Mar 29 '21 at 11:01

Filip Huhta

2,043
7
25

score 0 · Answer 8 · answered Nov 03 '22 at 18:12

I got this error while I was creating my favicon, and it turns out that i've put the wrong image format in type! For example, I did this:

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

but it turns out I had to change image/png to image/x-icon because the formats didn't match.

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

MatanyaP · Answer 9 · 2022-11-28T08:57:17.790

To continue on @joematune answer, if you converted your .ico from .png or something like that, it will probably not work out of a random website. The readme.md file in the starter kit shares a link that converts it successfully. As a bouns, it also give you a bunch of variations (16x16, 32x32, apple-touch, etc.). Just replacing the old files with the new ones worked for me without modifying anything.

this is the link

score 0 · Answer 10 · answered Feb 17 '23 at 19:36

0

If you think your configuration is correct but it's not still working, clear .next folder and run yarn build once again. Changes should apply this time.

answered Feb 17 '23 at 19:36

Mahdieh Shavandi

4,906
32
41

score 0 · Answer 11 · edited Apr 03 '23 at 16:37

0

save favicon into /public, and use like this:

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

edited Apr 03 '23 at 16:37

Eric Aya

69,473
35
181
253

answered Apr 03 '23 at 13:57

Hamid Mohamadi

141
2
4

score 0 · Answer 12 · answered Jul 04 '23 at 09:12

0

For anyone who uses basePath property in Next.js configuration file, I have solved this issue to add my basePath value to href attribute of my <link> tag.

ex)

<link rel="icon" href="/[yourBasePath]/images/favicon.ico"

answered Jul 04 '23 at 09:12

Y.Han

47
4

Abel · Answer 13 · 2023-07-23T06:04:35.753

0

App router:

Place favicon.ico in public/img folder y a then add to layout.js

  <head>
    <link rel="icon" href="/img/favicon.ico" sizes="any" />
  </head>

edited Jul 23 '23 at 06:04

answered Jul 23 '23 at 05:49

Abel

3,989
32
31

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

13 Answers13