Next.js Discord

Discord Forum

icon.png overriding favicon.ico

Unanswered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
I have these two. I want to use the favicon.ico for the browser tab. It has a transparent background. And the icon.png for bookmarking and saving the app on the Home Screen on any device. Right now I’m using apple-icon.png and that’s not giving me and issue. But when I add icon.png like from the docs it’s overriding my favicon.ico, why?

20 Replies

Plague
icon.png will always override favicon.ico because it's more granular and can live in any segment your app folder.

favicon.ico can only live in the route segment of the app folder
Alligator mississippiensisOP
So I can either use icon.png or favicon.ico not both?
Because the apple-icon.png if you save it on your home page it shows that icon.

On android what icon would that show if I don’t include the icon.png file? Just a placeholder right?

Because my favicon is different than my icon.png
Southeastern blueberry bee
Can't you use the ImageResponse API to handle this case? https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx

Default the return to the favicon's icon but have some logic to return the bookmark/home-screen icon based on request params
@Plague `icon.png` will always override `favicon.ico` because it's more granular and can live in any segment your `app` folder. `favicon.ico` can only live in the route segment of the `app` folder
Sun bear
Hmm. I actually have my favicon.ico inside the src/app/[locale] folder and it seems to be working just fine.
@Sun bear Hmm. I actually have my `favicon.ico` inside the `src/app/[locale]` folder and it seems to be working just fine.
Plague
Hmm, interesting may have something to do with internalization. The docs state that favicons can only be set in the root app segment.
@Plague Hmm, interesting may have something to do with internalization. The docs state that favicons can only be set in the root `app` segment.
Sun bear
That's good to know actually. I'll probably move mine in the root of the app folder just to be safe.
@Alligator mississippiensis Because the apple-icon.png if you save it on your home page it shows that icon. On android what icon would that show if I don’t include the icon.png file? Just a placeholder right? Because my favicon is different than my icon.png
Plague
I'm unsure when it comes to the mobile side of things, as for if you can use both or not I have never tried but from the sounds of it you can't, and if you can then the icon.png would override the favicon on the segment it is in and below
@Plague Hmm, interesting may have something to do with internalization. The docs state that favicons can only be set in the root `app` segment.
Sun bear
I do remember I kept receiving some favicon.ico not found in the console log whenever I would reload the localhost using ctrl+shift+c so maybe that's the reason why 😁
Sun bear
Umm currently I only have one as far as I'm aware. I didn't get to tablet/mobile layout design yet.
@Sun bear Umm currently I only have one as far as I'm aware. I didn't get to tablet/mobile layout design yet.
Plague
Yeah was just curious to see if there was any relation to the favicon issue, here is what I'm talking about regarding [multiple root layouts](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts) btw if you didn't know this was possible
Plague
Yeah not something you'd use everyday but definitely useful when you need it
Alligator mississippiensisOP
I just created a new repo and it worked fine
I think it’s something in the repo that I’m working with that it’s doing this
Also using next 14.1.4
Not sure if that makes a difference
The new repo was using next 14.2.11
@Alligator mississippiensis The new repo was using next 14.2.11
Plague
Ah perhaps it was this change in 14.2.8 that fixed what you were experiencing - https://github.com/vercel/next.js/pull/67982