Favicon image not uploading

Favicon image not uploading

manekakknowle
Excursionist
29 0 3

Please assist me, my favicon image is not uploading,

Screenshot 2024-06-14 at 16.54.35.png

 

 

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: 

pyr01069.jpg

 

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. 

Replies 6 (6)

kazi
Shopify Partner
582 88 110

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">

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

manekakknowle
Excursionist
29 0 3

still nothing as you can see...

Screenshot 2024-06-15 at 18.05.25.png

this. is the code in theme.liquid.

 

Screenshot 2024-06-15 at 18.07.09.png

kazi
Shopify Partner
582 88 110

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
Shopify Partner
61 14 16
manekakknowle
Excursionist
29 0 3

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) 

Screenshot 2024-06-27 at 10.03.41.png

 is this because of the image format?

AcidPi
Shopify Partner
61 14 16

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