The complete guide to optimize your favicon for a speedy website

Have you noticed that my website has a favicon and it appears on your browser really fast? By optimizing the favicon of your website, you can boost the loading speed for every new visitor, and I am going to share to you all the steps I went through.

Image credit: Photo by Marc-Olivier Jodoin on Unsplash, used with modifications.

1. Make sure it exists

When you try to open a new website, almost every web browsers would try to retrive the favicon.ico file from the root location. If you do not have one, your web server is going to return a 404 Not Found HTTP status error page every time that a visitor (either new or returned) visit your website. Therefore, you are not making anything faster or easier by skiping this file. Your server would still do the unnecessary disk reading, waste CPU power, and may do some database queries (specially if your error status page is dynamic generated).

I would highly recommend you to use the RealFaviconGenerator to generate your favicon. I am not affiliated with that page, but since it is free and do a pretty good job—it autogenerate several optimized favicon files and a small HTML snippet suited for all major browsers—so you would save a lot of time by using that service. But, read the next step before trying to generate your own favicon!

2. Make sure it is simple

Any complex image would take more spaces for storing the color information and position, so avoid designing complex icon! Those complexity is completely unnecessary for a icon, because a icon is small, those fine details would become indistinct for human eyes.

Since nowadays we love flat/minimalist designs, therefore, take this oportunity to redesign your icon!

3. Make sure you have enabled the gzip compression for favicon.ico

A favicon.ico file that contain all the recommended resolutions may become surprisingly large (easily surpass 5 KB, and in my case, my favicon.ico takes 14.7 KB), is there a way to make it smaller?

Yes! Most modern browsers support gzip compression, but by default, Apache HTTPD and NGINX do not compress ICO files. By applying gzip compression on the favicon.ico file, the file would be transfered compressed, saving a lot of bandwidth and time! In my case, it went down from 14.7 KB to 1.38 KB, almost 11 times less than uncompressed one.

To enable gzip compression for your favicon, add the following code to your .htaccess if you are using Apache HTTPD:

AddOutputFilterByType DEFLATE image/x-icon

For NGINX, I would recommend you to upload both uncompressed and gzip compressed version of favicon.ico, and turn on the gzip_static on your NGINX configuration file to avoid needing to compress on-the-go, so you would save CPU power and time.

For generating a gzip-compressed favicon, use this command on Linux:

$ gzip -k9 favicon.ico

4. Make a smaller version of favicon.ico for browsers that do not support gzip

This step would become completely unnecessary in the near future, but for the sake of compatibility with those outdated browsers that do not support gzip, we should still try this one.

So, if you use NGINX and have enabled the gzip_static option, since you have two separated files, you can create a PNG compressed version of favicon.ico by using this free and powerful image editor to serve those special browsers: GIMP.

To do that, after you have started GIMP, go through “File” menu › “Open As Layers…” and open your favicon file, so your favicon file would be imported to several layers, corresponding to different favicon size. Then export all of it by going through “File” menu › “Export As…”, and the file type would be “Microsoft Windows icon (*.ico)”. After you clicked the “Export” button, a new window with different options should appear. Tick all of “Compressed (PNG)” options here, then click “Export” again and the PNG compressed ICO file would be saved.

It is very important to avoid this step if you are using Apache with gzip compression for ICO file turned on, because after gzip compression the file size would be larger than a traditional ICO files.

5. Make a SVG favicon

If you have used the RealFaviconGenerator service that I mentioned before, you should already have some PNG favicons already generated. This is great! Because most modern browsers support PNG favicon, and those browsers would only retrieve the PNG file that suit best (normally, a single PNG file should be smaller than a ICO file).

If your favicon design is simple, there is a format that could be even smaller than PNG files: SVG. Unlike PNG, SVG has the advantage of being scalable without losing any quality, so it is the perfect format for a favicon because it can be scaled to multiple sizes by using a single file while preserving the quality. Unfortunately, most browsers lack support for SVG favicon, however, this situation could be changed very soon, so, by preparing your site with a SVG favicon should improve the loading time in the near future.

You can tell the browsers to retrieve PNG and also SVG if they support it, by adding some HTML code to your webpage like this:

<head>
	<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
	<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
	<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
</head>

While RealFaviconGenerator do a pretty good job, you still can optimize their PNG files and minify their SVG favicons to make it as small as possible. For PNG, I recommend to use optipng or pngcrush command-line app to optimize it while preserving the quality. For SVG, there are several online free tools that can minify it for you. Due to my programmer nature, I did it manually.

6. Make sure it is cacheable

Since it is very rare the need to update the favicon, so make it cacheable! This can potencially avoid those repeated retrieval while refreshing the page or jumping to another internal pages.

For /favicon.ico, you should set the Expire header of wisely, because most browsers request this file name by default, so you wouldn't be able to update it for your returning visitors until their cache expire.

For PNG and SVG favicons, you can set the cache for years, because unlike favicon.ico, you can use different name for those favicon file if you wanted to update it, and then change the file name on the webpage header.

And, that is all! Now you can enjoy your really super optimized favicon!