Add favicons for Shopify

Last updated: 16 August, 2020

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

Let’s face it, nobody wants to waste their life thinking about favicons (especially me!). 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.

Generate favicons

First head over to Real Favicon Generator and generate your icons. Take care to check all the setting in each tab.

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.

You will also need to edit and upload the site.webmanifest.json file (shown below). I also added the file extension “.json”.

{
	"name": "Your Store Name",
	"short_name": "Your Store Name",
	"icons": [
		{
			"src": "assets\/android-chrome-192x192.png",
			"sizes": "192x192",
			"type": "image/png"
		},
		{
			"src": "assets\/android-chrome-512x512.png",
			"sizes": "512x512",
			"type": "image/png"
		}
	],
	"theme_color": "#ffffff",
	"background_color": "#ffffff",
	"start_url": "https://your-domain.com/",
	"display": "standalone"
}

Be sure to edit the snippet above and set the correct path for the Android assets. If you login to the Shopify admin, you can find the image files and copy the paths.

The end result should look something like this. Also be sure you change the theme_color to match your color scheme.

{
	"name": "Accent",
	"short_name": "Accent",
	"icons": [
		{
			"src": "https:\/\/cdn.shopify.com\/s\/files\/1\/1158\/3098\/t\/4\/assets\/android-chrome-192x192.png?13373704242453535029",
			"sizes": "192x192",
			"type": "image/png"
		},
		{
			"src": "https:\/\/cdn.shopify.com\/s\/files\/1\/1158\/3098\/t\/4\/assets\/android-chrome-512x512.png?13062946215459455012",
			"sizes": "512x512",
			"type": "image/png"
		}
	],
	"theme_color": "#00d1ae",
	"background_color": "#ffffff",
	"start_url": "https://accent-theme-1.myshopify.com",
	"display": "standalone"
}

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>
			<square150x150logo src="{{ 'mstile-150x150.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 mask-icon and theme-color.

<!-- /snippets/favicons.liquid -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | asset_url }}">
<link rel="manifest" href="{{ 'site.webmanifest.json' | asset_url }}">
<link rel="mask-icon" href="{{ 'safari-pinned-tab.svg' | asset_url }}" color="#cc3300">
<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="#cc3300">
<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">
<meta name="theme-color" content="#cc3300">

Final step

Finally in your layout/theme.liquid file, add the following to the head section. You can also add it to these files if desired: layout/password.liquid and layout/gift_card.liquid

{% include 'favicons' %}

Testing

If you head back to the Real Favicon Generator site, you’ll notice that they have a form on the homepage for testing your site.

Update

The snippet above is a bit shorter than previously posted version. If you’re interested you can read more about it here: New favicon package – Less is more.