A Shopify store owner is experiencing inconsistent favicon sizing across different pages and devices, particularly noticing zoom issues on mobile that weren’t present previously. They suspect recently added custom code may have caused the problem.
Recommended solution:
<link rel="icon"> tags that multiple code additions may have created<link rel="icon" sizes="any" href="{{ 'favicon.png' | asset_url }}">This should ensure consistent favicon rendering across all devices and pages. The issue likely stems from code conflicts rather than the image file itself.
Hi, can anyone assist me? My favicon icon appears in different sizes throughout my pages all of a sudden and I have a feeling it could be me adding lots of new codes in which could have messed it up. Here are some images to show! Even on a mobile, the icon is zoomed in… which wasn’t an issue a few days before. Thanks! (My website link: https://iamcuko.com/)
Hi @CUKO
To fix inconsistent favicon sizing on your site, ensure the favicon image you uploaded is square (preferably 32x32 pixels) and that any added code hasn’t overridden favicon styles. Check your theme’s theme.liquid or header.liquid files for multiple tags, which could conflict and cause scaling issues.
For mobile, confirm the favicon is correctly sized by adding this tag in theme.liquid:
This should ensure consistent display across devices.
If you have other questions, I am willing to answer them more.
Best regards,
Daisy
