Add favicons for Shopify

If you search the web looking for expert advice on favicons, you’ll likely find authoritative information that is often out-of-date.

Let’s face it, nobody wants to waste their life thinking about favicons. The current situation is a mess and it can only get worse as new devices are released, with no clear industry standards.

So while we don’t want to waste time, we do want the site to look good when we save a bookmark to the home screen. Thankfully there is an easy solution. It might be overkill, but that’s a topic for the debate club.

Generate favicons

First head over to Real Favicon Generator and generate your icons.

Upload assets

Upload the icons to the “assets” directory of your Shopify theme. Don’t upload the browserconfig.xml file and don’t change the file names.

Create config

Next create a file called browserconfig.xml.liquid and add the snippet below. Then upload that to your “assets” directory. Be sure you change the TileColor to match your color scheme.


<?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>#cc3300</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Create snippet

In the “snippets” directory of your Shopify theme, create a file called favicons.liquid and add the snippet of code below. You will also need to change the color values for TileColor, mask-icon and theme-color.


<!-- /snippets/favicons.liquid -->
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="57x57" href="{{ 'apple-touch-icon-57x57.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ 'apple-touch-icon-60x60.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ 'apple-touch-icon-72x72.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ 'apple-touch-icon-76x76.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ 'apple-touch-icon-114x114.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ 'apple-touch-icon-120x120.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ 'apple-touch-icon-144x144.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ 'apple-touch-icon-152x152.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon-180x180.png' | asset_url }}">
<link rel="icon" type="image/png" href="{{ 'favicon-32x32.png' | asset_url }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ 'favicon-194x194.png' | asset_url }}" sizes="194x194">
<link rel="icon" type="image/png" href="{{ 'favicon-96x96.png' | asset_url }}" sizes="96x96">
<link rel="icon" type="image/png" href="{{ 'android-chrome-192x192.png' | asset_url }}" sizes="192x192">
<link rel="icon" type="image/png" href="{{ 'favicon-16x16.png' | asset_url }}" sizes="16x16">
<link rel="manifest" href="{{ 'manifest.json' | asset_url }}">
<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}">
<link rel="mask-icon" href="{{ 'safari-pinned-tab.svg' | asset_url }}" color="#333333">
<meta name="apple-mobile-web-app-title" content="{{ shop.name }}">
<meta name="application-name" content="{{ shop.name }}">
<meta name="msapplication-TileColor" content="#cc3300">
<meta name="msapplication-TileImage" content="{{ 'mstile-144x144.png' | asset_url }}">
<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">
<meta name="theme-color" content="#cc3300">

Final step

Finally in your theme.liquid file, add the following to the head section. Once again be sure to set the theme-color.


{% include 'favicons' %}
<meta name="theme-color" content="#cc3300">