Why isn't my favicon appearing after adding it to theme.liquid?

Suba · ‎02-29-2024

Tried adding favicon in Themes.

Added code directly to theme.liquid under <head>. nothing works. please help

nexuscommerce · ‎02-29-2024

Hi Suba,

To update your favicon to an ICO format and ensure it's displayed in Google search results, please follow these steps:

Convert Your PNG Favicon to ICO

Visit an online conversion tool like ConvertICO.com or Favicon.io.
Upload your current PNG favicon file.
Download the converted ICO file once the process is complete.

Upload the ICO File to Your Shopify Store

Log into your Shopify admin dashboard.
Navigate to Settings > Files.
Click on Upload files and select your ICO file to upload it to your Shopify store. Once uploaded, Shopify will provide a URL for the file. Please keep this URL handy as you will need it for the next step.

Update Your Website's Favicon Link

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Actions > Edit code.
Locate the <head> section in your theme's HTML code. This might be in a file like theme.liquid.
Replace the current favicon link with the new one, using the ICO file URL provided by Shopify:

<link rel="shortcut icon" href="PASTE_YOUR_SHOPIFY_ICO_URL_HERE" type="image/x-icon">

Replace PASTE_YOUR_SHOPIFY_ICO_URL_HERE with the actual URL of your ICO file.

Submit Your Site to Google Search Console

Verify your site ownership in Google Search Console if you haven't already.
Once verified, use the Sitemaps feature to submit your site’s sitemap. This helps Google find and index your site, including the new favicon.

Converting to ICO ensures wider compatibility across browsers and platforms.

Uploading the ICO to Shopify and updating the link ensures your site uses the correct favicon format.

Submitting your site to Google Search Console and ensuring your sitemap is up to date helps Google crawl and index your site more effectively, including the favicon update.

Let me know if this helps! After completing these steps it may take time to see the results reflect in Search Engines.

If you found my answer helpful, please let me know by giving me a thumbs-up or marking it as a solution.
Get Instant Answers & Support with Nexus Commerce at nexuscommerce.co

View solution in original post

wo · ‎02-29-2024

All themes will have settings for adding website icons in theme customization, and the settings for different themes will be different.

Suba · ‎02-29-2024

I have already added the above in the themes.

My favicon is not displayed in home page alone.

I can see it on other pages. Please help

nexuscommerce · ‎02-29-2024

Hi Suba,

There's likely code on the home page specifically preventing the favicon from rendering. Can you share a URL to your site for further investigation?

If you found my answer helpful, please let me know by giving me a thumbs-up or marking it as a solution.
Get Instant Answers & Support with Nexus Commerce at nexuscommerce.co

Suba · ‎02-29-2024

https://leafysheets.com.au/

nexuscommerce · ‎02-29-2024

Thanks! I can see in the code that the favicon reference below is missing from your homepage:

<head><link rel="shortcut icon" href="//leafysheets.com.au/cdn/shop/files/Favicon_32x32.png?v=1707989633" type="image/png"><meta name="google-site-verification" content="fczJdvhzXMrZ7uPwS1hIkgezG2BHHx553b8vSVni0gk" />

1. Check the Homepage Theme Code

Go to your Shopify Admin dashboard.
Navigate to Online Store > Themes.
Find the theme you're using and click Actions > Edit code.
Open your homepage template. This could be index.liquid, home.liquid, or a template with a similar name under the Templates directory.
Also, check theme.liquid under the Layout directory, as this file is common across your whole site and might be where the favicon is supposed to be included.
Ensure the following line is present in the <head> section of your homepage template or theme.liquid:

<link rel="shortcut icon" href="//leafysheets.com.au/cdn/shop/files/Favicon_32x32.png?v=1707989633" type="image/png">

2. Use an Absolute URL

Although the current URL should work, consider using an absolute URL to the favicon file to avoid any potential issues with relative paths. For example:

<link rel="shortcut icon" href="https://leafysheets.com.au/cdn/shop/files/Favicon_32x32.png?v=1707989633" type="image/png">

Shopify allows you to use different templates for different pages. It's possible that the subpages are using a template that doesn't include the favicon link.
Check the templates for your subpages by going to Online Store > Themes > Actions > Edit code. Look for template files under the Templates directory that might be used by your subpages (e.g., page.liquid, product.liquid, etc.) and ensure they include the favicon link in the <head> section.

Let me know if you have any questions or would like assistance implementing this update.

If you found my answer helpful, please let me know by giving me a thumbs-up or marking it as a solution.
Get Instant Answers & Support with Nexus Commerce at nexuscommerce.co

Suba · ‎02-29-2024

Hi

This helped to an extend. I can now see on all pages including homepage.

However, on the google search, it still not showing.

nexuscommerce · ‎02-29-2024

Hi Suba,

To update your favicon to an ICO format and ensure it's displayed in Google search results, please follow these steps:

Convert Your PNG Favicon to ICO

Visit an online conversion tool like ConvertICO.com or Favicon.io.
Upload your current PNG favicon file.
Download the converted ICO file once the process is complete.

Upload the ICO File to Your Shopify Store

Log into your Shopify admin dashboard.
Navigate to Settings > Files.
Click on Upload files and select your ICO file to upload it to your Shopify store. Once uploaded, Shopify will provide a URL for the file. Please keep this URL handy as you will need it for the next step.

Update Your Website's Favicon Link

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Actions > Edit code.
Locate the <head> section in your theme's HTML code. This might be in a file like theme.liquid.
Replace the current favicon link with the new one, using the ICO file URL provided by Shopify:

<link rel="shortcut icon" href="PASTE_YOUR_SHOPIFY_ICO_URL_HERE" type="image/x-icon">

Replace PASTE_YOUR_SHOPIFY_ICO_URL_HERE with the actual URL of your ICO file.

Submit Your Site to Google Search Console

Verify your site ownership in Google Search Console if you haven't already.
Once verified, use the Sitemaps feature to submit your site’s sitemap. This helps Google find and index your site, including the new favicon.

Converting to ICO ensures wider compatibility across browsers and platforms.

Uploading the ICO to Shopify and updating the link ensures your site uses the correct favicon format.

Submitting your site to Google Search Console and ensuring your sitemap is up to date helps Google crawl and index your site more effectively, including the favicon update.

Let me know if this helps! After completing these steps it may take time to see the results reflect in Search Engines.

If you found my answer helpful, please let me know by giving me a thumbs-up or marking it as a solution.
Get Instant Answers & Support with Nexus Commerce at nexuscommerce.co

Али136 · ‎03-25-2024

hi, can you also help me with the favicon? It doesn’t show up on my website either.

hfound · ‎08-28-2024

Did you get this fixed? I just fixed mine with the below code:

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

Just go into your theme.liquid code, search "favicon", delete old code and replace with the above. Worked like a charm for me!

labfifteenco · ‎04-29-2024

i have done the steps you have shown but still i cannot get it to show on google search

labfifteenco · ‎04-29-2024

so im also having this issue. I cannot for the life of me get my favicon image to display in google search results, can anyone assist. I have tried the above solution but this also doesnt seem to have work as it has for others

hfound · ‎08-28-2024

Did you get this fixed? I just fixed mine with the below code:

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

Just go into your theme.liquid code, search "favicon", delete old code and replace with the above. Worked like a charm for me!

Why isn't my favicon appearing after adding it to theme.liquid?