Add a favicon to your website using code

A favicon (favorites icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears (for example, in bookmarks or search results.)

Obtaining an image for your favicon

This article from Smashing Magazine lists a few websites that can generate your icon for you from a larger image. You save your favicon as either a favicon.png or a favicon.ico file. The same article will show you what artwork works well in such a small size.

Creating your own favicon

The ideal size of a favicon is 16x16 pixels. You should save your favicon as either favicon.png or favicon.ico.


You might notice that different browsers respond differently to the filename extensions. If you have problems with your favicon displaying in Internet Explorer, save your favicon with a .ico extension.

Adding your favicon to your Shopify website

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

  2. Click on 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 on 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:

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

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

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

Want to discuss this page?

Visit the Shopify Community