With my current workload, most of my debugging involves JavaScript and, sometimes, CSS. This is the first time I can remember needing to actively debug an image. I saw an issue where a favicon wasn’t being displayed properly in Safari (both 3 and 4). I kept going back and forth between browsers, verifying that the favicon wasn’t being displayed correctly. It appeared that any color I added to the icon just wouldn’t be displayed.

The issue, it appears is related to one-bit .ico files. These files contain only two colors, typically black as the first and another as the second. The format is highly optimized so that the icon size is as small as possible. Unfortunately, Safari seems to completely ignore the second color and renders it as white.

As an example, I created a simple (and ugly) one-bit icon: . If you’re viewing this post in any browser other than Safari, you’ll see a red smiley face; viewing in Safari shows a white smiley face. The second color, red, is completely lost and not rendered in Safari.

The solution was to change the icon format to four-bit using IcoFX, which results in a slightly larger file size (318 bytes versus 198 bytes for the one-bit version), but works in all browsers: .

I know this is a much shorter post than I usually have, but I’m hoping it will save developers some time.

Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.