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

B

25

44

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

Burthen answered 16/5, 2020 at 12:46 Comment(11)

Are you trying to see it locally or through a hosted online service? – Croup 16/5, 2020 at 12:47

I'm trying to see it locally. But it doesn't work when I deploy it to Vercel's Now either – Burthen 16/5, 2020 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". – Croup 16/5, 2020 at 12:52

Nope, that's not working. Could it be because I am repeating the <Head> component with the <link> tag on each page (index.js, whats-on.js etc.) instead of just creating a single <Head> component that contains the <link> ? – Burthen 16/5, 2020 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? – Josefina 16/5, 2020 at 13:3

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? – Croup 16/5, 2020 at 13:4

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. – Burthen 16/5, 2020 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. – Josefina 16/5, 2020 at 13:45

Yes, the favicon is reachable – Burthen 16/5, 2020 at 13:47

It's reachable at /favicon.ico as expected (not /public/favicon.ico) – Burthen 16/5, 2020 at 13:48

I was running into issues with favicon.ico in my app/ directory until I realized I accidentally had it included as a protected route (the Clerk middleware was forcing login to access it). – Coverall 26/5 at 1:29

C

63

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>

Cuticula answered 4/5, 2021 at 16:33 Comment(9)

This worked for me I was migrating from the next js version 8 to 11 and this works. – Camarilla 18/8, 2021 at 19:27

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 ... – Cristencristi 9/12, 2021 at 5:19

It works in _document.js too. – Osman 15/2, 2022 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? @Cristencristi have you discovered why this configuration works this way? Quite weird. – Cripps 21/7, 2022 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 <Head />. Apparently all links must be direct descendants of <Head />. – Cristencristi 23/7, 2022 at 3:10

I just added it to a /public/image folder without adding any code to <Head> and it worked for me on next 12.2.3 – Glossolalia 25/8, 2022 at 7:59

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. --> css-tricks.com/favicon-quiz – Rodl 21/12, 2022 at 9:53

Mine worked by changing the favicon.png location to inside image/ and href location. I couldn't find the reason behind why the location should be public/image/ ... – Source 18/9, 2023 at 5:46

For Next.js v14, see @Hekmat's answer. – Kuenlun 27/5 at 17:54

D

62

Anyone facing the same issue in Nextjs latest version (v14), move your icon to app directory and just rename the favicon.ico to icon.ico

Dierdredieresis answered 14/2 at 21:27 Comment(8)

goated, but from where did you find this info? I cannot seem to find it in docs – Piecrust 5/5 at 2:14

Thank you! I was going crazy why my favicon never changed.... – Batsheva 8/5 at 7:29

@Piecrust I tried different ways, including official docs, but it was not that clear (at that time), so with combination of difference resources/answers, I came up with that. Its great to see it helped you – Dierdredieresis 8/5 at 23:52

@Batsheva great to see it helped you! – Dierdredieresis 8/5 at 23:53

Answer I was looking for, nextjs doc says favicon.ico to be stored under app/ but doesn't mention changing it icon.ico – Beyer 10/5 at 15:51

but icon.ico showing background white dont know from where its coming from lol – Scudo 24/6 at 16:59

Thanks @Dierdredieresis amazing approach, how where you able to find this ? – Prudhoe 2/7 at 8:22

@Prudhoe glad it helped. I found it by combining different resources. – Dierdredieresis 13/7 at 21:8

S

20

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.

Screens answered 29/3, 2021 at 10:59 Comment(0)

G

15

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.

Galloglass answered 5/8, 2021 at 12:49 Comment(1)

saved my day. Such a confusing setup with working with nextjs, and lack of documentation. It's like find a needle in haystack – Dubuffet 15/2 at 5:45

F

9

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

Fellowman answered 11/11, 2021 at 16:32 Comment(0)

C

8

App router:

Place favicon.ico in public/img folder, then add this to layout.js

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

Colet answered 23/7, 2023 at 5:49 Comment(1)

I confirm this works for NextJs v.14 – Anal 18/4 at 17:10

F

4

For me, I replaced the default favicon.ico file with a favicon.png. But it seems that for jpg, png extensions, the file needs to be named icon.png. Source:https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Frightfully answered 9/10, 2023 at 19:14 Comment(1)

This worked when nothing else would. Just had to save it in src/app and everything worked. – Precentor 2/4 at 20:56

S

4

Renaming favicon.ico to icon.ico worked for me (Next v14.1.4).

Shoshone answered 4/4 at 18:30 Comment(0)

M

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

Metalware answered 1/5, 2022 at 18:28 Comment(2)

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. – Tampa 2/5, 2022 at 2:37

For Next.js 11 (11.1.4) this solution worked both in dev and production (AWS Amplify). – Lingo 7/6, 2022 at 9:47

A

2

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

Anthropoid answered 24/4, 2023 at 5:53 Comment(0)

A

2

Working for Next v14.0.4

Prenotes:

I'm using /src folder
I'm using an SVG as favicon
I copied my file under /public/images for my project organization

Instructions

Delete your favicon.ico inside /src/app
Add your favicon.svg image inside /public/images
Modify your layout.tsx to include the icons metadata
Make sure you add url & href to the icon definition

export const metadata: Metadata = {
  // any other property you might have here.
  icons: {
    icon: [
      {
        url: "/images/icon_name.svg", // /public path
        href: "/images/icon_name.svg", // /public path
      },
    ],
  },
};

Ardenia answered 19/12, 2023 at 3:45 Comment(0)

E

1

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.

Elviraelvis answered 17/2, 2023 at 19:36 Comment(1)

This is what finally fixed it for me. Thanks! – Covin 17/6 at 17:38

D

1

✅ I've tried many ways but the only one that worked for me is the following:

place your icon.png in public folder then add this link to the head of your layout.tsx.

<head>
        <link
          rel="icon"
          href="/icon.png"
        />
</head>

Dom answered 12/3 at 6:51 Comment(0)

S

1

I found that the official next.js docs did not work. I moved my icon.ico (changed from favicon.ico) to /public/images and changed the path within the href reflect that in my <link> and finally got it to work. See image.

favicon rendering

Sincere answered 17/4 at 17:8 Comment(0)

V

1

In Next 14:

If deploying on Vercel, replacing favicon.ico does not work because the old favicon.ico will still be pulled from the build cache. This is why renaming favicon.ico to icon.ico works for so many people. However, if you ever need to replace the new icon.ico, you'll have the same problem.

You can can bypass the build cache by redeploying the latest deployment from the Vercel dashboard and leaving the checkbox "Use existing Build Cache" unchecked. Or by using the Vercel CLI command vercel --force --prod from your local repo. This allows you to simply replace the default favicon.ico file in the create-next-app boilerplate.

Hopefully this clears up why so many users are experiencing this problem.

Veraveracious answered 14/5 at 16:46 Comment(0)

V

1

As of Next JS v 14.2.3, the other answers don't work. What worked for me is this video

To summarize the video:

Put the favicon in the root folder i.e. the src/app or just app. Just like it was for the Favicon of the starter app of Next.js.
Delete the .next folder. It might not work on dev so try building the app using npm run build and then npm run start.

Also, for anyone like me who's using Arc browser try to check on Chrome. It works there perfectly. For both the build and dev.

Verlaverlee answered 22/5 at 16:53 Comment(0)

M

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

Medical answered 29/3, 2021 at 11:1 Comment(0)

M

0

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

Marshy answered 3/11, 2022 at 18:12 Comment(0)

T

0

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

Troubadour answered 28/11, 2022 at 8:24 Comment(0)

L

0

save favicon into /public, and use like this:

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

Lascivious answered 3/4, 2023 at 13:57 Comment(0)

R

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"

Robbert answered 4/7, 2023 at 9:12 Comment(0)

D

0

working on next 14:

Put the favicon in the /app directory and like RogerKint said call it icon.png or icon.jpg

Disposure answered 8/12, 2023 at 12:22 Comment(0)

A

0

In my case, using next 14 and the new /app folder. The issue was that my favicons were under /public/favicons and as per the next documentation now are required in the root of the /app folder.

For reference https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Affluent answered 14/3 at 20:17 Comment(0)

E

0

On Safari I had to empty caches with Option + Command + E then refresh the tab.

I simply used favicon.ico file in /app.

Excision answered 12/5 at 20:32 Comment(0)

G

0

In App Router using Nextjs v14.1.0 :

Move your favicon.ico file in the /images folder inside the public directory and paste the following code in your topmost layout.tsx/layout.js file.

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

It worked for me; hopefully it works for you too.

Grenier answered 23/7 at 23:32 Comment(0)

Recommended topics

Hot tags