How to add a favicon

As of writing if you want to add a favicon to your store then it's very easy to do but requires a little bit of basic coding.

Step 1: Create your favicon

First of all you will need to make a 32x32 px PNG image with your logo.

Step 2: Upload the image

Once you've done that, head on over to your " My Themes" in the main menu. Then click on the "Edit code" button on your theme you want to add the favicon to.

Once you're in there you want to go to the asset manager.

Then select your file and upload it, take note of the filename, you'll need it in the next step.

Step 3: Add the code to your theme

Ok now that the image is uploaded we can link to it in the code.

There are 2 components to this:

  1. The HTML for the favicon
  2. The theme function that will load the URL to the image.

The code you need is this

<link rel="icon" type="image/png" href="{{ asset_url('favicon-file-name.png') }}">

But change "favicon-file-name.png" to the file name from Step 2.

Now add this to the theme code, just add it to the <head> section of your index.html, like this... See steps (a) and (b) on the screen grab below.

Now click save step (c)!

Load up your store, you may need to refresh it a couple of times for the favicon to update as browsers tend to cache it, but you should be good to go!

Congrats on your new favicon.