Create multi-resolution favicon

Question

I'm looking for a way to create a favicon.ico from a single image, however, I'm having some problems with all the resolutions.

I've tried using the following ImageMagick's command:

convert -file1- -file2- favicon.ico

As this was suggested on several forum posts and websites, but I can't really figure it out exactly...

Does anyone know how to do this?

Answer 1

After a bit of searching I came up with 2 solutions:

solution #1:

You could just log into any linux box with ImageMagick installed, rename your source image (with a resolution of at least 256x256 pixels and a PNG format file) to 'favicon.png', and run the following command:

convert favicon.png -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 57x57 \) \
      \( -clone 0 -resize 64x64 \) \
      \( -clone 0 -resize 72x72 \) \
      \( -clone 0 -resize 110x110 \) \
      \( -clone 0 -resize 114x114 \) \
      \( -clone 0 -resize 120x120 \) \
      \( -clone 0 -resize 128x128 \) \
      \( -clone 0 -resize 144x144 \) \
      \( -clone 0 -resize 152x152 \) \
      -delete 0 -alpha off -colors 256 favicon.ico

.. and you'll have your favicon.ico with most well-known formats baked right into one file.

Be sure to checkout the favicon cheat sheet @ https://github.com/audreyr/favicon-cheat-sheet for more favicon information.

solution #2:

At the risk of promoting a site which will eventually turns into a paid service:

For those of you without Imagemagick or no knowledge on how to implement these favicons, have a look at this tip I got about https://realfavicongenerator.net/ .. it also generates HTML code and gives you a couple of extra options on how to render the file for certain platforms.

Answer 2

The following, more simple command has as similar outcome to the one mentioned by Henry, but preserves any transparency in the original PNG file:

convert favicon.png -define icon:auto-resize=152,144,128,120,114,110,72,64,57,48,32,16 favicon.ico

Presumably you could disable transparency (if desired) with "-alpha off" added to this command.

Answer 3

There are some online tools if you don't use ImageMagik. For example www.icoconvert.com - it is very easy-to-use online tool and support multi-resolution icon generation and various effects. Another simple online tool is www.favicon.cc - you can directly draw the icon there on the canvas, but it does not support multi resolution.