Jump to page content

Favicons

Favicons are the little icons associated with Web sites which appear alongside the URL in the address bar, inside tabs and alongside bookmarks, for easy visual recognition of the site and to look pretty. Introduced in Microsoft Internet Explorer 5 for the favourites bar, they are traditionally Windows icon files, although I have also seen other formats used too. Interestingly, Firefox in Windows 2000 supports 32-bit .ico favicons even when Windows 2000 only supports 24-bit icons.

My very first favicons were made during my server-side Web developer post at the University of Hertfordshire for our internal Web applications. I have been able to obtain three of them back: the icons for WEBCOM, Xpertise and my Web-based hierarchical notes store, ColdPad:

I am not sure whether my first ever favicon was for WEBCOM or for the WISDOM Intranet site. The latter icon was that of a yellow lightbulb and was rather pretty. The only other icon I know I made during my Web developer stint was for the university staff telephone directory.

After making the icons for the university, I did not touch favicons again for some time until I created one for Firetrack just to ward off all the annoying errors in my site log from browsers like Phoenix (now Firefox) looking for one. I no longer have a copy of that icon, or the others I will have made for subdomains of Firetrack. We pick up the story, though, with the move of the Geek Culture Satellite Pages to telcontar.net.

Note that where two icons are shown, the first is the 32-bit version (for any decent browser) and the second is the 8-bit version for Internet Explorer in Windows 2000 and earlier.

Bit depths and saving favicons

For square icons, the most efficient way to save them would be a single 8-bit mode with a custom palette. Right? Turns out that, counter-intuitively, this is untrue. The most efficient method is in fact a 24-bit image, as you will see below. Ignore all the nonsense I wrote here previously, though.

16×16 icons have 256 pixels. All icons have a 1-bit mask. Each image and mask row is rounded up to a 32-bit boundary, so here each 16-pixel mask row has two padding bytes. Pixels in 24-bit icons are stored as 24-bit values, but 8-bit palette entries are four bytes each, with a padding byte. 32-bit icons still have a 1-bit mask in addition to the alpha channel. The comparison is as follows (all sizes in bytes):

Component 4-bit 8-bit 24-bit 32-bit
Image 256 ÷ 2 = 128 256 × 1 = 256 256 × 3 = 768 256 × 4 = 1024
Mask 16 × 4 = 64 16 × 4 = 64 16 × 4 = 64 16 × 4 = 64
Palette 16 × 4 = 64 256 × 4 = 1024 N/A 0 N/A 0
Headers 6 + 16 + 40 = 62 6 + 16 + 40 = 62 6 + 16 + 40 = 62 6 + 16 + 40 = 62
Total 318 1406 894 1150

Reference: ICO format at daubnet.com

Even a full 32-bit icon with alpha is still smaller than an 8-bit image. With larger image sizes, this will obviously no longer be true, but at 16×16, 24-bit is more efficient than 8-bit, as is 32-bit. Therefore, for square favicon images, stick to pure 24-bit colour and save on file size! (Or, if you heed W W Heinz’s words, 4-bit, only 318 bytes as now also documented …)