Serving GZIP compressed Favicon with Netlify

Recently I have been annoyed when my weekly WebPerformance Report email from WebPageTest shows a failure on Compress Transfer.

This failure, reported in red was done by just one small file… favicon.ico.

Favicon in ICO format is the only one of a couple used on my, and other, Hugo-based static websites. It’s not served first, as SVG and PNG are there as well, however, still WebPerformance Report uses it as default.

As this was just an icon, I haven’t bothered to do anything about this, as this does not impact anything, but, I don’t like to be in red and it starts annoying me.

Doing a search I noticed, that despite the Netlify Edge network (this is where my sites are served) support Brotli, favicon.ico is still served in uncompressed format.

Netlify is not Apache, I cannot just add the AddOutputFilterByType DEFLATE image/x-icon to the .htaccess file so I decided to investigate it a bit more.

I found a post on the Netlify Support Forum regarding Serving gzipped favicon.ico where the fifth response put a bit of light how to achieve that.

My favicon.ico file is a simple collection of prepared, compressed and optimised PNG files as I described in Simplified way of adding a favicon to the website.

I decided to compress my favicon.ico as a GZIP file and serve it this way.

GZIP Compression

To compress the file I just used single command from The complete guide to optimize your favicon for a speedy website by Fong-Wan Chau.

gzip -k9 favicon.ico

This gived me favicon.ico.gz file.

I changed the filename (extension) to read back as favicon.ico and the original file I renamed to favicon_uncompressed.ico as a backup.

mv favicon.ico favicon_uncompressed.ico
mv favicon.ico.gz favicon.ico

My original favicon.ico file weight 15KB where compressed one little below 2KB, but I cannot serve GZIP-ped favicon under .ico extension just like that. I need to advise, for browsers, how this file shall be read. In that case I need to tell, that this file is a GZIP file that need to be decompressed before use.

From a browsers point of view, all modern browsers support GZIP compression and can read and display favicon.ico correctly even if served GZIP compressed. To do that with Netlify I just need to advise that my file is compressed by specifying the content encoding.

Content encoding

To advise that our favicon.ico is in fact GZIP compressed file we just need to add an information into _headers file. On websites built with Hugo this file is saved inside the static folder.

/favicon.ico
  Content-Encoding: gzip

When our site is build, Netlify will read this file and add relevant headers to it.

The simple addition of the content encoding information will let browsers know what type of file they are dealing with and when visiting favicon.ico the browsers will do what they are intended to. They decompress the file and serve it as an ordinary icon by displaying its preview.

This simple approach put me back on the green in WebPageTest results.

Achieved what I want, job done!

😏