Favicon image not uploading

manekakknowle · ‎06-14-2024

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 -%}

{%- endif -%}

however it is not working.

kazi · ‎06-14-2024

Hello @manekakknowle

The favicon code seems not working

put the code in theme.liquid after <head> tag

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

manekakknowle · ‎06-15-2024

still nothing as you can see...

this. is the code in theme.liquid.

kazi · ‎06-15-2024

I can see the favicon in browser tab also the code in website source.

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

AcidPi · ‎06-16-2024

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

manekakknowle · ‎07-04-2024

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?

AcidPi · ‎07-04-2024

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

Favicon image not uploading

Favicon image not uploading

Community Blog Articles