Next.js Discord

Discord Forum

how to reduce app icon size?

Answered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hello, im usig next.js app router and i have an icon in my /app called icon.png. The problem is when i check webpack bundler analyzer it shows my app icon is 144kb. But next.js doc says they dont accept .websp format. How can I reduce the size image or it doesnt matter for this case? The image i got from online manfofest generators.
Answered by joulev
app icons are not processed with next/image because, well, you don't use next/image on them. next/image is for rendering images on websites, not for icons.

the solution is reduce the image file size and image resolution where possible. if it's just for the icon, you don't need a 4K logo.
View full answer

3 Replies

Netherland DwarfOP
Its weird because even my large images for my website get converted to webp format by next js image and they are only 10kb when the images are really huge. I heard of dynamic metadata import should i use that?
@Netherland Dwarf Hello, im usig next.js app router and i have an icon in my /app called icon.png. The problem is when i check webpack bundler analyzer it shows my app icon is 144kb. But next.js doc says they dont accept .websp format. How can I reduce the size image or it doesnt matter for this case? The image i got from online manfofest generators.
app icons are not processed with next/image because, well, you don't use next/image on them. next/image is for rendering images on websites, not for icons.

the solution is reduce the image file size and image resolution where possible. if it's just for the icon, you don't need a 4K logo.
Answer
Netherland DwarfOP
Okay thanks!