Compress your favicon with gzip

I think a lot about optimizing and compressing images but only recently learned you can optimize your favicon using gzip. Properly constructed favicon are a bit problematic because they contain multiple images at different sizes bundled into a single ICO file. As you might guess, that can result in larger file sizes.

The favicon for my web design & development business has several sizes bundled within it and came in at an embarrassingly large 68k:

→ https://snaptortoise.com/favicon.ico

Because the favicon doesn’t show up in the network tab for the Chrome (or Safari) developer tools, it never crossed my mind that the favicon was that large. When I ran my site through a speed-test service it suggested reducing the size of my favicon as a way to speed things up.

Now, the real solution here is to start serving PNGs at various sizes. You can read more about the various sizes and how to specify them in your page’s head at the Sympli blog.

But, according to caniuse.com this approach only has 84% support. That’s… well, that’s plenty, really. But it bothers me, especially because I’m seeing conflicting info about PNG support between Sympli’s blog post and the caniuse.com page.

Every browser supports ICO files and I already have one, so what can I do to make that unsightly 68k file smaller? It turns out it’s simple: use gzip to compress the file. Here’s the catch: if you have gzip compression automatically turned on—which you should, because it’s trivial and the performance benefits are massive— that’s not going to automatically apply itself to your favicon.

If you’re using Apache you’ll have to explicitly add something to your site configuration or .htaccess file so that favicon are also gzipped:

AddOutputFilterByType DEFLATE image/x-icon

That’s it. My favicon went from 68k to 6.5k (!!!).

So, long story short, If you’re using an ICO file for your favicon, make sure you’re using gzip to compress it.

For excellent information on further optimizing your favicon I suggest reading The complete guide to optimize your favicon for speed by Fong-Wan Chau.