How to super optimize a favicon

⚠️ This article is outdated: For some reason the ImageMagick convert CLI no longer generates smaller .ico files when the source .png files have been optimized. After a few hours investigating I can’t workout why, or even with what versions everything worked. Here is a related StackOverflow question.

Learn how to manually create optimized website favicon.ico files as much as 60%+ smaller in file size without sacrificing content or quality.

This is something very few people seem to do, probably because no single tool exists. A pity since a favicon.ico file in the website root (still best practice) is one of the few things guaranteed to be downloaded by every first-time visitor. The smaller it is, the sooner it can appear.

The savings can be particularly juicy for icons containing multiple sizes, which is also best practice given the variety of ways favicons are used.

It really isn’t as hard as it looks, your second one will be easy 😉

Preparation

On Mac, we will be using:

Install ImageMagick

There are a variety of ways to install ImageMagick, but the easiest is to use an installer courtesy of our Kiwi friends at Cactuslab.

  1. Download the installer. You will only need the plain ImageMagic installer, it should be up the top.
  2. Run the installer. Pretty simple.

Create an optimized favicon

The flow will be:

  1. Create PNG images for each favicon size in your image editor.
  2. Optimize the images using ImageOptim.
  3. Use ImageMagick in Terminal to convert them all into one favicon.ico file.

1. Create the images

Choose the sizes you want in your favicon.ico. The very popular Favicon Cheat-Sheet ICO File section will be your saviour deciding.

In a folder titled favicon, create your PNG images with the design tweaked to look good at each size:

  1. 16.png
  2. 32.png
  3. 48.png

2. Optimize the images

Drag and drop the favicon folder into ImageOptim for it to do it’s thing. The savings you see are indeed the real deal.

3. Convert PNG images to ICO

In Terminal, type cd and drag and drop in your favicon folder. Hit enter to go straight to that directory.

Type out ImageMagick’s convert command containing the list of PNG files, ending with favicon.ico and hit enter:

convert 16.png 32.png 48.png favicon.ico

If you look in the folder, you will see your shiny new, optimized favicon!

Optimize an existing favicon

The flow is similar to creating a new favicon, except instead of using an image editor to generate the different sized PNG files in step 1 we will use ImageMagick in Terminal to extract them from your current ICO file.

Place your current favicon.ico in a folder called favicon.

In Terminal, type cd and drag and drop in your favicon folder. Hit enter to go straight to that directory.

Type out ImageMagick’s convert command, this time with:

convert favicon.ico favicon.png

If the ICO file contained different sizes a series of PNG images will be created in the something like this:

  1. favicon-0.png
  2. favicon-1.png
  3. favicon-2.png

Regardless of the number of PNG images, proceed with steps 2 and 3 under Create an optimized favicon above using these images accounting for their different filenames in step 3.

Compare the file size of the new ICO to the original, a 60%+ reduction is not unusual.