Can't have 2 icon.png/icon.jpg
Unanswered
Forest bachac posted this in #help-forum
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?
Is it possible to have >1 icon.png?
32 Replies
Forest bachacOP
Anyone know?
Alfonsus Ardani
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
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)Forest bachacOP
which files should i use
just apple-icon and favicon.ico?
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 :)
Forest bachacOP
it only generates favicon.ico and apple-icon.png
no apple-icon.ico or icon.ico
Alfonsus Ardani
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
it shows up fine on chrome with transparnet bg
Alfonsus Ardani
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
is there a way to edit the head in next app dir bc that seems the easiest way to fix this
Alfonsus Ardani
export const metadata API to manually link the icons'ere
joulev
add to the
<head> in your root layout<html lang="en">
<head>
<global head content>
</head>
<body>{children}</body>
</html>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 Ardani
¯_(ツ)_/¯
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