Search code examples
imagefaviconmeta

How do you combine multiple (different) images into a single favicon?

There are lots of services that will take an image and create every size of web icon out of it by downscaling it to the appropriate resolutions.

However, I have designed two favicons specifically for their resolution (16x16 and 32x32), which means I have two separate, different pngs. I would love to combine these icons into one favicon.ico so I can serve that file properly. Anyone know how one could accomplish this?

Solution

  • You can use ImageMagick:

    # For Ubuntu
sudo apt-get install imagemagick

convert favicon.ico favicon.png

# Now you have several files named favicon-0.png, favicon-1.png...
# Edit them or replace them

# Merge the PNGs into a single ICO
# Of course, list all the PNGs you need to merge
convert favicon-0.png favicon-1.png new_favicon.ico

    Icotool (sudo apt-get install icoutils) works in a similar way. Beware, it produces larger ICO when the embedded PNGs are large (which is usually not the case).

    Microsoft development tools (think Visual Studio) probably come with ICO edition tools, but I'm not in this stuff.