Next.js Discord

Discord Forum

Can't have 2 icon.png/icon.jpg

Unanswered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
Currently, in my app folder I have an icon.png and an icon.jpg. But, when built, only the icon.jpg is loaded.

Is it possible to have >1 icon.png?

32 Replies

Forest bachacOP
Anyone know?
alfonsus
why would you need >1 icon.png? and how will the icon be rendered?
@alfonsus why would you need >1 icon.png? and how will the icon be rendered?
Forest bachacOP
i want a 32x32 and a 16x16. currently i just have an icon.png and icon.jpg so i can have 2, but only one is rendered when built
I used these https://realfavicongenerator.net/ to generate all the necessary files
note that its not tailored to next.js so it will generate more files than what is needed in Next.js
then you can link them using https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons or use the file-based metadata (like putting favicon.ico, icon.ico, and apple-icon.ico at the /app dir)
just apple-icon and favicon.ico?
alfonsus
next.js supports favicon.ico, apple-icon.ico and icon.ico so
you can use all of those three
and since .ico already has different sizing inside the file, you don't need to worry about 32x32 and 16x16 anymore :)
Forest bachacOP
it only generates favicon.ico and apple-icon.png
no apple-icon.ico or icon.ico
alfonsus
welp you can use those then
you can also just rename favicon.ico to icon.ico
Forest bachacOP
the issue is that it shows up like this on safari. persisted even after using the thing u sent
@alfonsus welp you can use those then
Forest bachacOP
it shows up fine on chrome with transparnet bg
alfonsus
sometimes it takes a while for the favicon to update though. Have you made sure you opened it in a new tab?
Forest bachacOP
yes
@alfonsus sometimes it takes a while for the favicon to update though. Have you made sure you opened it in a new tab?
Forest bachacOP
is there a way to edit the head in next app dir bc that seems the easiest way to fix this
alfonsus
Sadly no, but you can try using the export const metadata API to manually link the icons
'ere
<html lang="en">
  <head>
    <global head content>
  </head>
  <body>{children}</body>
</html>
@alfonsus ||~~Sadly no, but ~~||you can try using the `export const metadata` API to manually link the icons
Forest bachacOP
i googled it, and apparently this issue is made by safari if you image doesnt meet contrast requirements. makes no sense bc my image is like navy blue with white text
but ty for ur help
alfonsus
¯_(ツ)_/¯
idk that exists
Forest bachacOP
i think its bc im in safari dark mode and the navy blue is too close to the dark gray