I find the documentation on this very confusing, to say the least. I'm using Next 14.1 with App router.I replaced the standard favicon.ico file with a new one that I generated online from the site logo. When I replace the app/favicon.ico with the new one, it disappears and just shows a globe. I have read at least 10 threads on this, and I've tried clearing the cache and so on. Nothing works. The output however, shows this: Which to me seems correct... I can also see the icon when I open http://localhost:3000/favicon.ico. If I add this to my generateMetadata() in app/layout.tsx: icons: { icon: "/logo.png", },Then the icon shows on the browser tab, and the html output looks like this .What is the correct approach? Can anyone provide some good example of how to set this correctly, along with the manifest, robots etc?

Favicon issues

Unanswered

Pacific anchoveta posted this in #help-forum

Pacific anchovetaOP

2024-03-30T15:08:28.000Z

I find the documentation on this very confusing, to say the least. I'm using Next 14.1 with App router.

I replaced the standard favicon.ico file with a new one that I generated online from the site logo.

When I replace the app/favicon.ico with the new one, it disappears and just shows a globe. I have read at least 10 threads on this, and I've tried clearing the cache and so on. Nothing works. The output however, shows this:

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

Which to me seems correct... I can also see the icon when I open http://localhost:3000/favicon.ico.

If I add this to my generateMetadata() in app/layout.tsx:

    icons: {
      icon: "/logo.png",
    },

Then the icon shows on the browser tab, and the html output looks like this <link rel="icon" href="/logo.png">.

What is the correct approach? Can anyone provide some good example of how to set this correctly, along with the manifest, robots etc?

7 Replies

Greenish Elaenia

2024-03-30T16:28:12.000Z

Try putting a 'icon.svg' under /app

like this

this works with png too

Without any further code, nextjs will automatically set this file as the icon

Theres docs that point out that nextjs is looking for a specific file format and file name to do this automatic icon setting feature

Why does replacing the favicon.ico not work despite it being at the same location, file format, and file name? idk either but had this same issue - solved it by using any other docs listed option except .ico file type

Docs in question is https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#icon
See how it says naming it 'icon.png', etc will work?