Solved

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

Suba
New Member
4 0 0

Tried adding favicon in Themes. 

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

Accepted Solution (1)
nexuscommerce
Shopify Partner
22 3 4

This is an accepted solution.

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

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

Upload the ICO File to Your Shopify Store

  1. Log into your Shopify admin dashboard.
  2. Navigate to Settings > Files.
  3. 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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit and click Actions > Edit code.
  3. Locate the <head> section in your theme's HTML code. This might be in a file like theme.liquid.
  4. 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

  1. Verify your site ownership in Google Search Console if you haven't already.
  2. 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

Replies 8 (8)

wo
Shopify Partner
73 20 17

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

wo_1-1709265011390.png

 

Suba
New Member
4 0 0

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
Shopify Partner
22 3 4

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
New Member
4 0 0
nexuscommerce
Shopify Partner
22 3 4

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
New Member
4 0 0

Hi

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

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

 

Screenshot 2024-03-01 at 3.33.24 pm.png

 

nexuscommerce
Shopify Partner
22 3 4

This is an accepted solution.

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

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

Upload the ICO File to Your Shopify Store

  1. Log into your Shopify admin dashboard.
  2. Navigate to Settings > Files.
  3. 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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit and click Actions > Edit code.
  3. Locate the <head> section in your theme's HTML code. This might be in a file like theme.liquid.
  4. 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

  1. Verify your site ownership in Google Search Console if you haven't already.
  2. 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
Visitor
1 0 0

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