Adding Favicons in Shopify

This Article:
This is an example for how to add favicons in Shopify, including an iPhone “add to home” tile to your Shopify website using the code editor. Most themes allow you to add favicons from the theme settings, but if you were having issues getting the theme to generate an Apple home icon, this should solve your issue.

Requirements:

• SHOPIFY
• Access to theme code
• Real Favicon Generator

Generating Your Icons

To begin, you’ll want to create a square image that’s about 650 x 650 and include the favicon logo you want to use. Save this image as a .PNG or .SVG file type.

REAL FAVICON GENERATOR:
https://realfavicongenerator.net/

ADDING YOUR ICONS

1. After you’ve generated your icons, click the “Favicon Package” button to download your new icons. Unzip the download and add each of your icons to the Shopify “ASSETS” library.

2. Open Notepad (or your preferred text editor) on your desktop and create a new file. Copy and paste the code below into this file (change the TileColor in the code to match your theme colors), save it using the file name below, and upload it to your Shopify ASSETS Library.

3. Save the file as: broswerconfig.xml.liquid

​

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="{{ 'mstile-70x70.png' | asset_url }}"/>
      <square150x150logo src="{{ 'mstile-150x150.png' | asset_url }}"/>
      <square310x310logo src="{{ 'mstile-310x310.png' | asset_url }}"/>
      <wide310x150logo src="{{ 'mstile-310x150.png' | asset_url }}"/>
      <TileColor>#de3e27</TileColor>
    </tile>
  </msapplication>
</browserconfig>

CONNECTING YOUR ICONS

1. Open Notepad (or your preferred text editor) on your desktop and create a new file. Copy and paste the code below into this file (change the theme-color in the code to match your theme colors), save it using the file name below, and upload it to your Shopify SNIPPETS Library.

2. Save the file as: favicons.liquid

<!-- /snippets/favicons.liquid -->
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">

<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#de3e27">
<meta name="msapplication-TileColor" content="#de3e27">
<meta name="theme-color" content="#ffffff">

<link rel="icon" type="image/png" href="{{ 'favicon-16x16.png' | asset_url }}" sizes="16x16">
<link rel="icon" type="image/png" href="{{ 'favicon-32x32.png' | asset_url }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ 'android-chrome-192x192.png' | asset_url }}" sizes="192x192">
<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}" sizes="16x16">
<link rel="manifest" href="{{ 'manifest.json' | asset_url }}">
<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}">
<meta name="apple-mobile-web-app-title" content="{{ shop.name }}">
<meta name="application-name" content="{{ shop.name }}">
<meta name="msapplication-TileColor" content="#722020">
<meta name="msapplication-TileImage" content="{{ 'mstile-144x144.png' | asset_url }}">
<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">
<meta name="theme-color" content="#722020">

​

CONNECT YOUR FILES

1. Open the file theme.liquid in your layouts section on Shopify.

2. Add the following to connect your files and load your icons.

3. Once you complete this step your icons should be connected.

To test this, go to your website and push CTRL-U to reveal the site code. You should see your icons in the header being generated by the layout snippet. Click on each of the icons to make sure an image loads. If you get a 404 error, double check that you loaded all images at the correct sizes + files names.

{% include 'favicons' %}

​