How to add favicon in Shopify Store

0 Shares

How to insert favicon on Shopify??

How to install favicon on Shopify??

How to add favicon to Shopify theme??

If you are looking for the answer to these queries, then you are in the right article.!!

I am going to explain to you how to add favicon in Shopify step by step, so keep reading and follow the steps one by one.

Topics Covered in this Article

What is Shopify favicon?

When you open your website, in the browser tab, look at the top left corner Favicon of the website will be visible. Favicon is part of branding, it’s a very small icon of your brand name, so today we are going to learn:

Shopify favicon size is 32×32 px, so make sure you keep ready your favicon image before login into the Shopify store.

Favicon makes an impression in the customer’s mind, it’s a brand recaller. The favicon image helps in brand awareness of the product image, it generates authenticity of the website in the customer’s mind.

Shopify Favicon is an important part of your online store Theme, hope you understood now what is a favicon on Shopify.

what is a favicon on Shopify

How to add Favicon in Shopify

Step 1 – Login into the Shopify store admin center, click on the “Online Store” and “Themes” (Options are in the left panel), and click on the “Customize” button (Refer to the below image).

Step 2 – After clicking on the “Customize” button click on the “Theme Settings”, and click on the “Favicon” link (you can find this option on the left, refer to the below image).

Shopify favicon settings

Step 3 – After clicking on the “Favicon” link, you will get an option to upload the Favicon image (Refer to the below image).

select favicon image

Step 4 – After Selecting the favicon image and upload it to the Shopify Store and click on the “Save” button (Refer to the below image).

in the below image, I have uploaded my Favicon image “N”, same like that you can also add your favicon image to the Shopify store.

Add favicon image to Shopify store

Step 5 – After uploading the Favicon, you saved and now you have to click on the “Save” button in the “Theme Settings”(Refer to the below image), and it’s done, you can change the Favicon or upload a new one as well using these steps.

so these were the steps How to add favicon in Shopify store or how to change favicon on shopify from Shopify store.

Favicon added to the Shopify Theme

So you have learned How to add Favicon Shopify Store or how to change favicon on shopify store step by step.

Favicon added to the Shopify store

Favicon size Shopify

The ideal size of a favicon for Shopify is 16×16 px or 32×32 px, if your favicon size is larger than above, it will be auto reduce once you will upload it to Shopify.

Make sure you add an Alt tag for the favicon, Because if in case favicon doesn’t display or load then the Alt text will be displayed in the place of the icon on the Shopify store.

What is the Error Shopify favicon not showing

After adding favicon to Shopify theme, it should be visible on the browser tab left corner. It should be visible not only home page but all the sub pages as well.

After adding favicon, if it’s not showing on the browser tab, then there could be some issue, that you need to check and fix. First, check your theme. liquid file if the favicon code is added or not.

Login to your Shopify store, click on the “Online Store” –> Themes –> click on the current theme customize button and click on Edit code.

Refer to the below image, highlighted code should be added in the theme.liquid page, if missing, please add and click on the same.

Favicon code – size you can set eighter 32×32 px or 16×16 px depending on your theme structure.

  {%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

Shopify favicon not showing error — credit Shopify community

Free favicon generator

Here is the list of few popular free favicon generator online tools to create favicon and upload to the Shopify store. You don’t need to download these tools software on your machine, simple open them in the browser and create your Favicon.

Read More