Safari is inverting tab favicon/icons

Does anyone know how to fix this…

As you can see from this image, the Ikea and Stackoverflow icons/favicons are displaying correctly. But my two, the middle ones, are not. The first (Caffeine) should be orange with a white background. The other red with a white background. Safari is inverting and grey-scaling them.

Any ideas why and a fix?

I’ve done some more digging into this, I even found an old thread on the old/new RW forum: Safari Pinned Tab Displays as Black in Safari - #3 by martef86 - RapidWeaver - RapidWeaver Forum but I dikdn’t find a solution.

It seems Safari changes some icons to greyscale, in certain circumstances. Allegedly it’s all about contrast, but in testing I found that to be nonsence. Or at least, to not be consistant or even logcial.

If anyone has a solution, I’d love to hear it.

I have noticed this too and couldn’t figure out why it happens. I expect it is out of the web designers control and just Safari buggering about again.

Pretty much.

Safari does a check for contrast between the colours in the icons, and the background. And if it seems it too low, it monochromes it. So in the case of a coloured circle with a contrasty, but not contrasty enough for Safari, icon on it, Safari turns the whole thing into a black circle. Therefore making the contrast between the original circle and the icon zero.

The only safe option I’ve found is to make the background transparent and the icon a simple chape, that way if Safari dislikes it, you at least end up with something resembling an icon.