Favicons drama

Written: 28 Dec 2021 | Last updated: 1 Jan 2022

For information on how to add favicons see here

I have been deliberating over how to implement my favicon for quite a while now. I wanted to do it in such a way that it had a minimal effect on the size of pages and the repository in general.

First of all I implemented a test favicon by taking pngs for my favicon and exporting them as a ico file. This is because when you have an ico file in the website's home directory, web browsers find them automatically and so I wouldn't have to add more code to my webpages (so reducing page size). I had the image sizes 16x16, 32x32, 64x64, 110x110 and 114x114. What I found is this expanded the file size massively. The sum of all the pngs was 4355 bytes (4.3 KiB) and yet the ico file was 40614 bytes (39.7 KiB). This is over a 9.3x increase in size.

Obviously, this isn't the most lightweight way to implement a favicon. Therefore I decided on the other option. Add the favicon file/s to a directory and add some code in each page which tells the web browser where to find the favicon.

This has other advantages over size as well:

• Each page can have a different or even no favicon (good for LBP pages),
• This allows for a wider range of image formats such as gif (so I can have an animated favicon).

I also shrank the range of the favicon sizes I had. I used 16x16, 32x32 and 48x48 as I read somewhere that Google recommended that as a minimum range (I can't find it now for some reason). If my website was much bigger and I'd be expecting people to do much more with my favicon, like add me to their iOS homescreens or share me on Facebook then I would make a bigger range.

Finally, I decided I wanted to make my favicon a gif, not just showing a double cube but also showing the cubes seperately. This took three attempts as I had to adjust the delays between frames to 800ms and then set the disposal to replace as I made the background transparent and the two cubes at the start were overlaying.

To add the icons I used the sed command.

I used:

sed -i 's|line above favicon link|line above favicon link\n\t\t<link rel="icon" sizes="SIZE" href="path/to/favicon">|'

Where:

• line above favicon link is what it says it is. I used </title> to get the link placed directly under the title code,
• \n indicates a newline,
• \t indicates a tab,
• SIZE is replaced with the correct size/s in the format HEIGHTxWIDTH in pixels,
• path/to/favicon is what it says it is.