Archived topic
Favicon with transparent background shows up as black
3 replies · Started by Anna on May 26, 2020
My favicon, uploaded at 512x512 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.
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?
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.
No problem :)
