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?
#icon.png overriding favicon.ico
last creek
dull flareBOT
sand kindle
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
last creek
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
worthy anchor
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
burnt badger
`icon.png` will always override `favicon.ico` because it's more granular and can...
Hmm. I actually have my favicon.ico inside the src/app/[locale] folder and it seems to be working just fine.
sand kindle
Hmm. I actually have my `favicon.ico` inside the `src/app/[locale]` folder and i...
Hmm, interesting may have something to do with internalization. The docs state that favicons can only be set in the root app segment.
burnt badger
Hmm, interesting may have something to do with internalization. The docs state t...
That's good to know actually. I'll probably move mine in the root of the app folder just to be safe.
sand kindle
Because the apple-icon.png if you save it on your home page it shows that icon. ...
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
burnt badger
Hmm, interesting may have something to do with internalization. The docs state t...
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 😁
sand kindle
I do remember I kept receiving some favicon.ico not found in the console log whe...
Definitely possible, by chance do you have two Root Layouts?
burnt badger
Umm currently I only have one as far as I'm aware. I didn't get to tablet/mobile layout design yet.
sand kindle
Umm currently I only have one as far as I'm aware. I didn't get to tablet/mobile...
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 btw if you didn't know this was possible
burnt badger
Yeah was just curious to see if there was any relation to the favicon issue, her...
Wow, I had no idea we can have multiple layouts. I checked and I only have one 😁
sand kindle
Yeah not something you'd use everyday but definitely useful when you need it