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.