intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Adding a favicon to your website

A favicon (favorite 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. From your Shopify admin, click Online Store, then click Themes (or press G W T):

    Click Online Store then Themes

  2. Find the theme you want to edit, click the button, then click Edit HTML/CSS.

    Click Edit HTML CSS button

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.

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.