xf.is Blog   Archives  About

Favicon changes

2018-07-15

When I made this blog initially I created a favicon.ico file in the root of the website.

The file contained 3 versions and was 15406 bytes (15 KB)

$ identify favicon.ico
favicon.ico[0] ICO 16x16 16x16+0+0 32-bit sRGB 15.4KB 0.010u 0:00.010
favicon.ico[1] ICO 32x32 32x32+0+0 32-bit sRGB 15.4KB 0.010u 0:00.010
favicon.ico[2] ICO 48x48 48x48+0+0 32-bit sRGB 15.4KB 0.010u 0:00.010

and the file was much larger than the rest of the site.

However only the 16x16 and 32x32 versions really matter for web use (address bar and favorites).

First I extracted the png files from the ico file with imagemagick:

convert favicon.ico[0] -thumbnail 16x16 -flatten favicon-16x16-org.png
convert favicon.ico[1] -thumbnail 32x32 -flatten favicon-32x32-org.png

This reduced the filesize total to 1153 bytes.

Using pngcrush the filesize was further reduced

$ pngcrush -reduce -brute favicon-32x32-org.png favicon-32x32.png
...
     (41.72% critical chunk reduction)
     (34.98% filesize reduction)

$ pngcrush -reduce -brute favicon-16x16-org.png favicon-16x16.png
...
     (46.34% critical chunk reduction)
     (31.37% filesize reduction)

for a total of 765 bytes or 95% smaller than initially.

And adding following html in the header it restored the favicon functionality:

<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">  
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">