Next.js Discord

Discord Forum

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

Unanswered
Forest bachac posted this in #help-forum
Open in Discord
Avatar
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

Avatar
Forest bachacOP
Anyone know?
Avatar
Alfonsus Ardani
why would you need >1 icon.png? and how will the icon be rendered?
Avatar
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
Avatar
Alfonsus Ardani
try creating .ico instead if you want different sizing in one file
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)
Avatar
Forest bachacOP
which files should i use
just apple-icon and favicon.ico?
Avatar
Alfonsus Ardani
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 :)
Avatar
Forest bachacOP
it only generates favicon.ico and apple-icon.png
no apple-icon.ico or icon.ico
Avatar
Alfonsus Ardani
welp you can use those then
you can also just rename favicon.ico to icon.ico
Avatar
Forest bachacOP
the issue is that it shows up like this on safari. persisted even after using the thing u sent
Image
it shows up fine on chrome with transparnet bg
Avatar
Alfonsus Ardani
sometimes it takes a while for the favicon to update though. Have you made sure you opened it in a new tab?
Avatar
Forest bachacOP
yes
is there a way to edit the head in next app dir bc that seems the easiest way to fix this
Avatar
Alfonsus Ardani
Sadly no, but you can try using the export const metadata API to manually link the icons
'ere
Avatar
joulev & fuma pray for Schneider
add to the <head> in your root layout
<html lang="en">
  <head>
    <global head content>
  </head>
  <body>{children}</body>
</html>
Avatar
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
Avatar
Alfonsus Ardani
¯\_(ツ)_/¯
idk that exists
Avatar
Forest bachacOP
i think its bc im in safari dark mode and the navy blue is too close to the dark gray