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.

I also skipped the favicon.ico file as this doesn’t seem to be supported by the Shopify CDN.

You will also need to upload the manifest.json file (shown below). Be sure to set the correct file-path for the Android assets.

	"name": "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"
	"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"?>
			<square150x150logo src="{{ 'mstile-150x150.png' | asset_url }}"/>


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.

<!-- /snippets/favicons.liquid -->
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.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-16x16.png' | asset_url }}" sizes="16x16">
<link rel="manifest" href="{{ 'manifest.json' | asset_url }}">
<link rel="mask-icon" href="{{ 'safari-pinned-tab.svg | asset_url }}" color="#ffffff">
<meta name="apple-mobile-web-app-title" content="{{ }}">
<meta name="application-name" content="{{ }}">
<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">


Final step

Finally in your theme.liquid file, add the following to the head section.

{% include 'favicons' %}