Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Please assist me, my favicon image is not uploading,
here is the ICO file link. https://cdn.shopify.com/s/files/1/0861/5824/6183/files/favicon.ico?v=1718373564
I want this to be the favicon image:
and this is the website link https://yves-rocher.co.ke
I have tried to add the favicon ICO link to this code :
{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}
however it is not working.
Hello @manekakknowle
The favicon code seems not working
put the code in theme.liquid after <head> tag
<link rel="icon" type="image/png" href="https://cdn.shopify.com/s/files/1/0861/5824/6183/files/favicon.ico?v=1718373564" width="32" height="32">
still nothing as you can see...
this. is the code in theme.liquid.
Hi,
Reference: https://developers.google.com/search/docs/appearance/favicon-in-search
Request a Google recrawl - "Updates can take a few days or longer to appear in search results."
https://developers.google.com/search/docs/crawling-indexing/ask-google-to-recrawl
https://search.google.com/search-console
Regards
Hi, this did not work properly...It uploaded an image but you can see the quality of our website (on the left) compared to the international sites (on the right)
is this because of the image format?
Hi @manekakknowle
Issue is the background is not transparent, image is skewed and not taking up the full size of the image document.
Use the icon from your international site.
https://yvesrocherusa.com/cdn/shop/files/favicon-32x32.png
However, If you're wanting full coverage for new/old browsers and devices and have access to the original logo file @260x260px...
Check out this site https://realfavicongenerator.net you can create all possible favicons from a logo upload and test how they will display on different browsers / devices.
You will need to load icons to admin > content > files and incorporate to your theme.liquid.
Depending on how many options you select during setup something like this
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | file_url }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | file_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | file_url }}">
<link rel="manifest" href="{{ 'site.webmanifest' | file_url }}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Making sure to comment out / remove an icon being loaded from theme settings.
{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}
Regards
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025