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.
