How can I make my png favicon display with a transparent background?

[Berkeley2]

I want to add a favicon with a transparent background.  I added a png format with a transparent background, but it is not showing it transparent. 

Could I get help for this?

[BSS-Commerce]

Hi @Berkeley2 ,

To resolve the issue of favicons not displaying transparent backgrounds on Shopify, you can do the following:

First, check the image format and size:

Make sure your favicon is in PNG format with transparent background support, using a reasonable size, typically 16x16 pixels or 32x32 pixels.

Second, use Absolute Paths:

Place the favicon in your theme's root directory.
Use absolute paths to avoid errors when the browser cannot find a favicon. This ensures that the browser loads the favicon from the correct location.

Third, clear Cache:

Browsers can cache old favicons. Try clearing your browser cache or using a new browser to see if the issue resolves.

Fourth, test on different Browser:

Open the website in multiple browsers to confirm whether the issue only occurs on a specific browser.
Test with Development Tools:

Fifth, use your browser's Developer Tools to check if any errors occurred while loading the favicon.

If the problem persists, contact Shopify support. They can check for specific issues in your configuration and provide more accurate support.

[Berkeley2]

Thank you. I think it works on Chrome but not Safari.

I have one more question. How can I make the logo placed in the box that is  the reading list or favourite on safari. The logo is not within the box/icon. Let me attach a screenshot here.

 The logo is BEYLISS. But we see only a portion of it in the box.