Is the .ico format still relevant today?
An .ico file format can contain multiple images at different resolutions (e.g., 16×16, 32×32, 48×48, 64×64) and color depths (e.g., 8-bit, 24-bit). This allows the system or application to choose the most appropriate image based on the display context.
In 2024, we have a wide choice of newer image formats well suited for the web, like .png, .webp or .avif. So is *.ico still relevant? I believe that in web applications, it is seen as a legacy format. Still, it has some advantages over PNG files, even if rarely used:
- An icon in the .ico format can store different images for different sizes. Some icons don’t scale down well, and they benefit from having a different, simplified 16×16 or 32×32 image that looks better than a scaled-down image.
- While browsers might be up-to-speed with supporting PNG, other tools might assume the presence of the
favicon.icoin the legacy format (it was the standard for a long time).
Testing tools that convert PNG to ICO
For a long time, when I wanted to create an .ico file, I’d google “PNG to ICO” and choose one of the many online conversion tools. One problem I noticed was that the output was sometimes huge—one of my icons was 2 megabytes! It was as if the file contained a large uncompressed bitmap or several of them.
Serving a megabyte-scale file to display a small image is super inefficient, so I took a closer look to know which tool to pick for the job next time. And here’s a short test:
Source: Basketball icons created by Pixel Perfect – Flaticon
| Tool used to convert PNG to ICO | What did the output icon bundle include? | https://convertio.co/png-ico/ |
|---|---|---|
| https://convertio.co/png-ico/ | 256×256 PNG 512×512 PNG-ZIP | 25 532 bytes |
| https://convertio.co/png-ico/ | customizable, but the Favicon profile generated: 16×16 PNG 24×24 PNG 32×32 PNG 48×48 PNG 64×64 PNG 72×72 PNG 96×96 PNG 512×512 PNG | 192 925 bytes |
| https://convertico.com/ | customizable, but by default: 16×16 PNG 32×32 PNG 48×48 PNG 64×64 PNG 256×256 PNG | 121 810 bytes |
| https://cloudconvert.com/png-to-ico | 32×32 uncompressed file | 4 206 bytes |
| https://picflow.com/convert/png-to-ico | 256×256 PNG | 29 722 bytes |
| https://onlineconvertfree.com/convert-format/png-to-ico/ | 16×16 uncompressed 24×24 uncompressed 32×32 uncompressed 48×48 uncompressed 64×64 uncompressed 72×72 uncompressed 96×96 uncompressed 128×128 uncompressed 256×256 PNG | 192 225 bytes |
| My script (described later). I wanted to see what the optimum achievable for this image is. | 16×16 PNG 24×24 PNG 32×32 PNG 48×48 PNG 64×64 PNG 128×128 PNG 256×256 PNG | 47 040 bytes |
Which tool works best?
All the conversion tools from the first page of Google search results fail somehow:
- Sometimes, the selection of image sizes is controversial and doesn’t cover the typical use cases for icons,
- Often, the compression is weak or nonexistent
- Often, the order of images in icon files is non-optimal, although it doesn’t matter in 2024 I think
The least-worst option among the listed online converters is convertico.com, which has reasonable default settings and embeds compressed PNG files (however, the compression could be much better).
With a short script, I could generate an icon that is only 38% the size of the best result above. It has lossless quality and embeds even more icon sizes inside.
Sharing my solution
In case anyone wants to convert PNG to ICO in a more optimal way, this is how it can be done (assuming Windows console):
// use ImageMagick to generate image variants
magick input.png -resize 16x16 -depth 8 -quality 100 -define png:color-type=6 output-16x16.png
magick input.png -resize 32x32 -depth 8 -quality 100 -define png:color-type=6 output-32x32.png
...
// use optipng to compress the images. With '-nc' color palette won't be reduced, which is required by the next tool
optipng.exe -o7 -nc output-16x16.png
optipng.exe -o7 -nc output-32x32.png
...
// bundle .png files into .ico file
icomake.exe output.ico output-16x16.png output-32x32.png ...Code language: JavaScript (javascript)The tools I use are:
This approach seems to solve the problem quite well, and I think I won’t have to revisit this issue anytime soon 😀
No comments yet, you can leave the first one!