Did you notice my website has a favicon and it appears on your browser very fast? By optimizing the favicon of your website, you can boost the loading speed for every new visitors, and I am going to share to you all steps that I did.
Image credit: By courtesy and rights of Pixabay, uploaded by Unsplash, used with modifications.
1. Make sure it exists.
Nearly every graphics-based web browsers request favicon.ico from the server’s root location by default. If you do not have one, your server is going to return 404 Not Found HTTP status and may also display a user friendly status page every time any visitor (new or returned) visit your page. Therefore, you are going to spend unnecessary disk reading, and if your status page is dynamic generated, you also going to spend CPU power and maybe database queries.
I have used and now I am recommending the RealFaviconGenerator to generate a favicon for every browser and platform, and to take care almost every aspect of a perfect favicon for you.
2. Make sure it is simple.
A complex icon need more space to store color information, and those complexity is often unnecessary for a small icon, because those fine details become so fine that become indistinct for human eyes and it is often look like noise.
Nowadays flat icons is a fashion, therefore, you can either simplify your logo to fit the current fashion, or create a simple version for a smaller size of your logo. That results a smaller favicon file.
3. Make sure you enabled the gzip compression for favicon.ico.
A multi-size favicon with all recommended resolutions may become surprisingly large (easily > 5 KB, and in my case, my favicon has 14.7 KB), that can slow down your page every time the browser requests the favicon.
Most modern browsers support gzip compression, but by default, Apache HTTPD and NGINX do not apply gzip to ICO files. Stack Overflow, one of the fastest website of the world, also forgot to enable gzip compression for their favicon. By using gzip compression, I have reduced the transfer data of my favicon from 14.7 KB to 1.6 KB.
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 recommend you upload both uncompressed and gzipped version of favicon.ico, and add
gzip_static to your NGINX config to save the compression time. You can generate a gzip-compressed favicon using the following command on Linux:
$ gzip -9 favicon.ico
4. Make a smaller version of favicon.ico for browsers that do not support gzip.
It is good to use gzip compression for browsers that support it, but what about those that do not support it?
I tried to optimize my favicon following the steps mentioned at “How to super optimize a favicon”, but that does not work, the result is the same 14.7 KB file that RealFaviconGenerator gave me, so I need to find a way to create a smaller version of it.
If you use NGINX and enabled gzip compression as I mentioned above, you can create a PNG compressed version of favicon.ico by using GIMP to serve those special browsers.
First, you should import image of each size into its own layer from the “File” menu › “Open As Layers…” on GIMP, then export it again from the “File” menu › “Export As…” as an “Microsoft Windows icon (*.ico)”. When you click “Export”, there should appear a new window of options, tick all of “Compressed (PNG)” here, click “Export” again and you are done.
It is important to mention that you should not try to compress this version with gzip, because it can result a larger file. PNG is already compressed. My smaller version for those browsers that do not support gzip is only 2.4 KB.
5. Make PNG and SVG favicons.
Most modern browsers also support PNG favicon, this is great for speed because an individual optimized PNG should be smaller than a multi-size ICO file, and therefore if the browser support PNG favicon, the browser should only download the needed size.
SVG file format, unlike raster graphics like PNG, has advantages of being smaller and scalable without losing any quality. This is the perfect format for a favicon because it can scale to multiple sizes with a single file. Unfortunately, most browsers lack support SVG favicon, however, this situation could change soon, so, preparing your site with SVG favicon should also improve the loading time in the near future.
You can specific PNG and SVG favicon in your HTML 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>
You should optimize PNG and minify SVG favicons to make it as small as possible. Multiple online and free tools that can do this task. For PNG, I recommend to use
pngcrush to optimize it without losing quality. For SVG, I prefer to do it manually.
6. Make sure it is cacheable.
It is very infrequent to update the favicon, so, making it cacheable can avoid frequent request for it.
You should set the
Expire header of
/favicon.ico for the time what you feel comfortable, because by default most browsers request the
/favicon.ico and you cannot just rename the file to serve other version if you decide to change it.
For other versions of favicon defined with
<link> method, you should set the
Expire header for a few months or years in the future. Unlike favicon.ico, you can rename those favicon file and change the
<link> path if you decide to change it.
That is all, now you can enjoy your really super optimized favicon! Any comments?