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.

sn_fav_1

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:

sn_fav2

Then look in the form to see if there’s a section for Favicons. Here’s an screenshot of the Minimal Theme sn_fav3

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

Adding a Favicon directly into the theme code

Favicon images must be named either “favicon.ico” or “favicon.png”

You need to access the Theme Editor to add your favicon image directly to the theme code.

sn_fav4

Next, find the Asset folder in the sidebar and then click “Add a New Asset.” A dialogue box will appear, where you can upload your favicon.sn_fav5

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

sn_fav6

Find this code on the file: </head>

sn_fav7

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” />

sn_fav8

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

sn_fav9-1

  • Jay Clayton

    WORKS!
    Nice tip.