[Resolved] website icon background transparency

[Philippe]

Hi,

My website is onehomeplanet.com

The website icon is a png file with a transparent background. However, if I open another tab in the browser the icon will appear with a white square background in my website’s tab. It seems that css should be used to get a stable transparent background but I couldn’t find any clear instruction on what the css should be.

Is there any way to achieve what I want?

Thanks for your help,

Philippe

[Fernando]

Hi Philippe,

Are you referring to the site-icon in Appearance > Customize > Site Identity? If so, currently, the one you have uploaded isn’t PNG. It’s JPG which doesn’t allow transparency: https://onehomeplanet.com/wp-content/uploads/2022/07/cropped-Picture1-150×150.jpg

Try uploading a PNG file instead.

Hope this clarifies!

[Philippe]

Hi Fernando,

Interesting. I am noticing now that in the process of cropping the original image, WP creates a jpg file to be displayed.

How to avoid that?

[Fernando]

I see. To test, can you try uploading a different 512 x 512 PNG icon? I can’t replicate that issue from my end. I’m not sure if it’s server related.

Kindly let us know how it goes.

[Philippe]

I did that dozens of times already. I am not kidding.

Could I give you a temporary password instead, so that you try any png icon you want?

[Philippe]

So, I did another attempt and it worked this time. I do not understand what was missing before since the process of adding a website identity icon is pretty straightforward.

Well, it works. Case solved.

[Philippe]

Ok. I will sound crazy but I swear this is what is happening: the png cropped icon reverts back to jpg after a few seconds.

Thanks for your help,

Philippe

[Ying]

It sounds like a cache issue, can you make sure all cache is flushed including server cache?

And make sure your browser cache is also cleared.

[Philippe]

Hi Ying,

I should not have said, “reverts back.” The png file is originally saved as a cropped png file when used as the website icon and, after a short time, transforms itself into a jpg file. How could this be a cache issue?

Anyway, I will have another try at it. I will first delete the png and cropped jpg files, upload a new png, use it as the website’s icon, and let you know what happens.

Thanks.

[Philippe]

I found the issue but cannot tell why it happens. Nothing to do with cache (which I emptied in Cache Enabler plugin and Cloudflare).

As soon as I click on any other image in the WP media library, the cropped website’s icon turns from png to jpg.

Isn’t that intriguing? 🙂

[Ying]

I’ve never heard about this issue, though GP has no control over the media library, it’s controlled by WP and maybe some plugins.

I can see that your SEO plugin is adding the icon link to the WP head area, I’m not sure if it’s related.

Can you try disabling all your plugins except GP premium to test?

[Philippe]

Hi,

I have deactivated all plugins and reactivated them one by one, checking each time if the website icon file was turning from png to jpg if I clicked another image in the media library (I feel a little silly writing this). Nothing of the sort happened (I feel even more silly). So far, after an hour or so, the png icon file remains png.

[Ying]

Hum, super weird, I guess keep an eye on it? 🙂

[Philippe]

You bet!

[Author]

Posts