Safari doesn’t properly display one-bit favicons
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.