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.

Reminder

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 shop admin, click on the Themes tab.

#

2. Hover over the button and click Edit HTML/CSS.

#

3. Click on the Assets folder to open it.

#

4. Click Add a new asset.

#

5. Click the Choose file button and locate your favicon.

6. Click Upload asset.

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

#

8. 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" />

9. 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.


Save Cancel