[Resolved] Favicon with transparent background shows up as black

Home Forums Support Favicon with transparent background shows up as black

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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.

    #1302435
    Leo
    Staff
    Customer Support

    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?

    #1302509
    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.

    #1302576
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.