Jump to page content

Favicons

A selection of the website bookmark icons that I have drawn over the years (in both 32-bit and 8-bit forms):

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 …)