Favicon with transparent background shows up as black

[Anna]

My favicon, uploaded at 512×512 pixels, has a transparent background. I confirm this by opening it in Photoshop and see the grey checkered grid that indicates transparency.

However, the favicon shows up with a black (not transparent) background on my browser (I use dark mode). I see this black background favicon on Chrome, Firefox, and Safari. It even shows up in Google mobile search results (not in the desktop results because they don’t show a favicon next to the search results) with a black background.

How do I fix this? Let me know what resources you need. I did a search on the forum and couldn’t find an answer.

[Leo]

Hi there,

I think this is an issue related to operating system/browser rather than the theme.

I see it normally on FireFox:
https://www.screencast.com/t/1hja61PsoA

And found some related articles:
https://open.vanillaforums.com/discussion/26915/favicon-background-showing-black
https://stackoverflow.com/questions/44135967/transparent-background-gif-favicon-appears-with-black-square-sometimes-on-chrome

Can you see if they help at all?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anna]

Hi Leo,

Thank you for letting me know it’s browser related. I suspected it might be. But it seemed implausible because the other tabs I have open use transparent backgrounds in the logos, and the logos don’t show up with a black background whereas mine does.

When I started digging, I found the Vanilla post you linked to and saw it mentioned there was a software bug involved: “If Vanilla resizes a PNG with a transparent background, it gets a black background!” Another Stackoverflow thread confirmed the same. So, I wondered if it was related to how WordPress or GP was resizing the favicon for the different display sizes and in doing the resize, caused the transparency/alpha channel data to get lost or compress in such a way that it caused the black background.

I’ll probably do a bit more research and then give up on this by putting a white background behind my transparent logo.

Thanks for your help.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts