- This topic has 3 replies, 2 voices, and was last updated 7 months, 3 weeks ago by
Leo.
-
AuthorPosts
-
May 26, 2020 at 7:12 am #1301981
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.
May 26, 2020 at 10:52 am #1302435Leo
StaffCustomer SupportHi 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/1hja61PsoAAnd 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-chromeCan you see if they help at all?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 26, 2020 at 12:02 pm #1302509Anna
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.
May 26, 2020 at 1:17 pm #1302576Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.