Blog

Favicons, Favicons, Favicons!

Keeping with our recent stretch of Thursday announcements, we’re happy to tell you about the immediate availability of favicon support in themes!

Standard Themes

If you haven’t duplicated your theme to change HTML or CSS, follow these steps to set up your favicon:

  1. Go into your dashboard by signing in on the homepage.
  2. Go to your Storefront > Theme area.
  3. Click the “Options” button on your current theme.
  4. Scroll down to the “Favicon Image URL” option.
  5. Click the “Upload Image” button and choose your favicon file (.ico or .png).
  6. After your favicon finishes uploading, click “Save” at the top.
  7. Click Storefront > View Storefront and gaze at your beautiful new faviconned storefront!

While your best bet for creating a favicon is to use either an .ico or .png file at 16px by 16px, some devices can support higher resolution favicons these days.

Custom HTML Themes

If you previously duplicated your theme (your “HTML / CSS” button is enabled), you may not have the favicon option. But don’t worry! With a few recent additions to our theming system, you can add a favicon option to your custom theme very easily. Just follow these steps:

  1. Go into your dashboard by signing in on the homepage.
  2. Go to your Storefront > Theme area.
  3. Click your theme’s “HTML / CSS” button.
  4. Scroll down and click “Edit” next to your “default.json” config file.
  5. Scroll down to the bottom of the “settings” section and add the following setting:
...},

"favicon_image_url": {
"format": "image",
"content_type": true,
"label": "Favicon Image URL",
"help": "Enter an image URL or choose an image file to upload.",
"placeholder": "http://",
"position": 1000
}

Please Note: There must be a comma following your previous “setting-name”: {} block. Additionally, the “position” attribute above must not be the same as an existing “position” used in any other settings.

After you’ve done that, there’s just one more thing to add:

  1. Click “Save” and then “Done”.
  2. Click “Edit” next to your “default.html” layout file.
  3. Scroll down to the right before your </head> tag and paste in the following code:
{{ config['favicon_image_url'] | favicon_tag }}

Lastly, click “Save”, “Done”, “Back to Themes”, and then you can simply follow the first set of instructions at the top of this post.

If you have any questions, please let us know. Otherwise, see you next week!