Facebook pixel

How to add a favicon to your Shopify store

How to add a favicon to your Shopify store

Product photography. Sale banners. Promo roundels. Social icons. It’s no wonder you may have wandered past the relatively small favicon and find yourself constantly catching a sad little grey globe in the top left corner of the tab of your Shopify store. If only you could change that — and you can! Enter the favicon.

What is a favicon on Shopify?

A favicon is a small icon or graphic image linked to a particular page or website. Most browsers (Chrome, Firefox, Edge) use this in your tabs or in the address bar as a visual reminder of what website it is. Favicons are also used in your bookmarks list, and if you pin a website or app to a dock or menu.

shopify store favicon examples in browser tabs

And it’s exactly for this reason that it’s best to have a favicon: it’s a visual cue for people to remember your brand, your identity. It’s actually a pretty strong branding exercise for a Shopify store. Think of the Shopify shopping bag, or the GMail envelope, or the (old) Facebook blue and white F.

A good favicon will be able to, at a glance, encapsulate your brand and give something people to remember.

Favicons are tiny, but other images on your Shopify store are not. Make sure to optimize them for the best store performance!

Install TinyIMG now

Adding a favicon to a Shopify store

As a favicon is a relatively small icon, it’s generally a pretty small job. Most Shopify themes will include it as a straightforward option in your theme settings. We'll share two common ways to add a favicon: through theme settings and in the theme.liquid files directly.

Option 1: Add a favicon in the Shopify theme settings

1. Go to your theme:

adding favicon in shopify store theme settings step 1

2. Once in the theme section, click "Customise":

adding a favicon through shopify theme settings step 2

3. Scan to the bottom and click through on "Theme settings":

adding a favicon via shopify store theme settings step 3

4. And you’ve found the favicon! Click on the “Favicon” menu and select an image:

adding a favicon through shopify theme settings step 4

5. Once you’ve chosen your favicon, you can also add alt text to describe the image.

Option 2: Edit code in the theme.liquid file

If you need to update the theme.liquid file rather than using the theme settings in Shopify, you can. It’s more complex, so probably best to do this only if you have to (and don't forget to make a backup of your store, it never hurts).

1. As with the first method, you want to go to the theme settings screen:

adding shopify favicon in theme liquid file step 1

2. Cick on the three dots, or in some instances, “Theme Actions”:

3. Click “Edit code.” This opens in a new window, so if you get stuck it may be because you need to update your pop-up blocker.

adding a shopify favicon in theme liquid file step 2

4. Scroll down and click “Add new asset”:

adding a shopify favicon in theme liquid file step 4

5. Choose your favicon file and upload the asset. Note the filename of your favicon for later:

adding a shopify favicon in theme liquid file step 5

6. Find the theme.liquid file in the Layout folder, and click to open:

adding a shopify favicon in theme liquid file step 6

7. Use control + F to search for “favicon”, or this full code: 

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

8. Replace settings.favicon | img_url: '32x32' with:

my-favicon.ico | asset_url 

Where my-favicon.ico is the filename of the asset you uploaded earlier.

9. Click Save.

How to create a favicon for a Shopify store?

Shopify doesn’t (at the time of writing) have a favicon generator for their clients. But there are a number of free image cropping and compression tools online that you can use to make a favicon from your logo. Otherwise, you can use some specifically built online favicon generators.

Shopify store favicon examples

Favicons don’t always have to be an exact replica of your logo, but rather, can be slight variations. Like your signature and your initials, they mean the same thing with a different execution, and each can have its own signature style.

shopify store favicon examples

How to change a favicon on Shopify?

To change a favicon on Shopify, simply go back to the Theme Settings menu and replace the image with your new favicon, or go back through the same process and update both the asset and asset URL in the theme.liquid file.

 

Frequently asked questions

What are favicon dimensions for Shopify?

16x16 or 32x32 pixels are the Shopify favicon dimensions where you’ll have the most direct control over the quality of the image. Beyond that, Shopify will automatically reduce it.

What to do if favicon is not showing in the browser?

First, make sure you’ve cleared your cookies and/or are looking at the website incognito or on another computer.

If that doesn’t solve the issue, you’ll want to check in your theme.liquid and make sure the favicon code is present and implemented properly, including that the asset is uploaded.

What image format should I use for a Shopify favicon?

Favicons should be in .png or .ico format. PNG is typically more common.

About the author
Nikoleta Kokleviciute
Nikoleta is a Marketing Manager at TinyIMG, an app for image and SEO optimization for Shopify merchants. Nikoleta loves diving deep into digital marketing, eCommerce, social media trends, and creating content that benefits its readers!