Adding a favicon to your store

A favicon (favorites icon) is a small image or logo that appears on your browser tab:

Browser tab with Shopify logo

A favicon also appears in the following locations:

  • your web browser's history
  • as an icon on your desktop
  • next to your online store name when it is bookmarked.

Uploading a favicon to your store helps strengthen your brand and adds a polished look to your website.

Create a favicon

Before you can add a favicon to your store, you need to create one. You can use a free favicon generator website to create a favicon from your store's logo, or you can create your own. To find a favicon generator, search the internet for "free favicon generator".

The ideal favicon size is 16x16 pixels. If your favicon file is too large, then it will be reduced to 32x32 pixels when you upload it to your Shopify admin. You can save your favicon as either a favicon.png or a favicon.ico file.

Add your favicon to your store

The steps to add the favicon to your Shopify store depend on the type of theme your store is using:

  • If you're using a free Shopify theme with sections, click the Sectioned themes button below and follow the steps. A sectioned theme is a theme that lets you drag and drop content blocks to arrange the layout of your store's pages.
  • If you're using a free Shopify theme that doesn't support sections, click the Non-sectioned themes button below and follow the steps. Non-sectioned themes were released before October 2016, and require that you edit your theme code to add a favicon.
  • If you're using a third-party theme that you paid for, try contacting your theme developer, or click the Documentation link for the theme on the Shopify Theme store.

Add a favicon to a sectioned theme

If you are using a theme made by Shopify (a free theme from the Shopify Theme store), then your theme supports favicons.

  1. Click Customize .

  2. Click the Theme settings tab.

  1. Click Favicon.

  2. In the Favicon image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click the Library tab, and then click the plus button.
  3. Click Save.

Add a favicon to a non-sectioned theme

If you're using a Shopify free theme that you installed before October 2016, then you need to edit your theme code to add your favicon.

  1. Find the theme you want to edit, and then click Actions > Edit code.

  2. Click the Assets folder to open it.

    Assets folder
  3. Click Add a new asset.

    Add asset link
  4. Click the Choose file button and locate your favicon.

  5. Click Upload asset.

  6. Click the theme.liquid file to open it in the online code editor.

    Theme liquid
  7. Paste the following code between <head> and </head>:

    If your favicon has a .png extension, use this code:

    <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />

    If your favicon has an .ico extension, use this code:

    <link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}" type="image/x-icon" />
  8. Click Save.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free