How to Add Favicon to Your Shopify Store

What are favicons?

Favicons are small icons that appear at the top of the browser window ( in bookmarks) that are specific to your website. You should use a 16×16 pixel image of your logo.

Why you need a favicon for your site?

  1. Having a favicon improves your branding.
  2. Favicons help with navigation. Customers often have difficulty keeping track of all their open browser tabs. Favicons make it easy for them to identify the tab for your website, which increases the chance they will return.
  3. Help users find bookmarks. Favicons also make it easy for your users to find bookmarked pages in their archives.

How to add a Favicon to your store?

Option 1: Using your Shopify Theme settings

Most Shopify themes have options to add a favicon image.

First, open your store’s Theme Settings form: Then look in the form to see if there’s a section for Favicons. Here’s a tutorial of the Debut Theme

If there is a favicon, just upload your icon and you’re done. Otherwise, follow the steps in the next section.

Open your settings and go to “Online Store” and then click “Themes
On the right part click “Customize” then click on “Theme Settings

Under theme settings column, click on “Favicon” and click “Select the Image
Upload your desired favicon and then click “Save

 

Option 2: Adding a Favicon directly into the theme code

In adding a favicon by coding, you need to access the Theme Editor to add your favicon image directly to the theme code.

Open your settings and go to “Online Store” and then click “Themes
On the right part click “Customize” then click on “Theme Settings

Under the left column, click on “Theme Actions” and click “Edit Code

Make sure favicon images must be named with extensions of either “favicon.ico” or “favicon.png

Scroll down and click “Assets” then click “Add New Asset” the upload your favicon image then click “Upload Asset

Once you’re done uploading, find the file that says theme.liquid under Layout folder

Find this code on the file: </head>

Press ctrl + F to search

Above the </head> tag, paste the following code. Replace “favicon.png” with favicon.ico in that code if necessary.

<link rel=”shortcut icon” href=”{{ ‘favicon.png’ | asset_url }}” type=”image/png” />

Once you click save, your favicon should now show on your site.

  • Jay Clayton

    WORKS!
    Nice tip.