- This topic has 3 replies, 2 voices, and was last updated 3 months, 4 weeks ago by Leo.
May 26, 2020 at 7:12 am #1301981Anna
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.May 26, 2020 at 10:52 am #1302435LeoStaffCustomer Support
I think this is an issue related to operating system/browser rather than the theme.
I see it normally on FireFox:
And found some related articles:
Can you see if they help at all?May 26, 2020 at 12:02 pm #1302509Anna
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.May 26, 2020 at 1:17 pm #1302576
- You must be logged in to reply to this topic.