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 ICO 16x16 16x16+0+0 32-bit sRGB 15.4KB 0.010u 0:00.010 favicon.ico ICO 32x32 32x32+0+0 32-bit sRGB 15.4KB 0.010u 0:00.010 favicon.ico 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 -thumbnail 16x16 -flatten favicon-16x16-org.png convert favicon.ico -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">