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?
Topic summary
Main issue: a PNG favicon with a transparent background is not appearing transparent. The site owner is using Shopify and seeks help making the transparency display correctly.
Suggested troubleshooting steps:
- Verify image format/size: use a PNG with transparency and typical favicon dimensions (16x16 or 32x32 pixels).
- Use absolute paths (full URL to the file) and place the favicon in the theme’s root directory to ensure the browser can find it.
- Clear browser cache or try a fresh browser session, as favicons are often cached.
- Test across multiple browsers and check for loading errors via Developer Tools.
- If unresolved, contact Shopify support for configuration-specific help.
Latest update: It appears to work in Chrome but not in Safari, indicating a browser-specific issue.
Additional Safari concern: the site’s logo (“BEYLISS”) is cropped within Safari’s Reading List/Favorites box; only a portion shows inside the icon container. A screenshot was attached and is central to understanding the visual problem.
Outcome: No resolution yet; Safari-specific favicon transparency and icon cropping remain open questions.
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.
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.