Search code examples
favicon

Create multi-resolution favicon


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?


Solution

  • 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.