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 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.
favicon.icofile 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.
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
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
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.
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
/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!