Png Transparent Favicon

Berkeley2
Visitor
2 0 0

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?

 

Replies 2 (2)

BSS-Commerce
Shopify Expert
3380 447 498

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Berkeley2
Visitor
2 0 0

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.

Screen Shot 2023-11-24 at 1.11.33 PM.png

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