How to Add a Custom Favicon to Shopify

Shopify makes it easy to upload a favicon. Go to your admin, click Online Store, then Themes, then Customize, and you will find a favicon upload under Theme Settings. It takes about 30 seconds. The problem is what happens after you upload it.

Shopify takes whatever image you provide, resizes it to 32x32 pixels, and converts it to a PNG. That is the only favicon it generates. One size, one format. For a platform that powers over four million stores, the favicon support is surprisingly thin.

What Shopify Gives You

When you upload a favicon through the theme editor, Shopify adds a single <link rel="shortcut icon"> tag to your store's HTML. The image gets processed through Shopify's CDN and served as a 32x32 PNG. That is it. Nothing else happens automatically.

Shopify's 32x32 auto-resize

Shopify will resize any image you upload to 32x32 pixels, regardless of its original dimensions. If you upload a 512x512 PNG, Shopify shrinks it. If you upload a 16x16 icon, Shopify scales it up (and it looks terrible). Always upload an image that looks good at 32x32. A 128x128 or 256x256 source image works well because it divides evenly.

What Shopify Does Not Generate

Here is everything a modern website needs for complete favicon support and whether Shopify handles it:

Format	Purpose	Shopify Generates It?
PNG 32x32	Browser tabs	Yes
ICO (multi-size)	Legacy browsers, Windows shortcuts	No
Apple Touch Icon 180x180	iOS home screen bookmarks	No
PNG 192x192	Android Chrome, PWA installs	No
PNG 512x512	PWA splash screens	No
SVG favicon	Modern browsers, dark mode support	No
Web manifest	PWA icon declarations	No
Windows tile (browserconfig.xml)	Windows Start menu pins	No

If your store only needs to look right in a desktop browser tab, the built-in option works fine. But customers bookmark stores on their iPhones. They pin tabs in Safari. They add stores to their Android home screens. In every one of those situations, the Shopify default falls short.

Adding the Missing Favicons Manually

Shopify lets you edit your theme's Liquid templates, which means you can inject whatever <link> tags you need into the <head> of your HTML. You will need to edit the theme.liquid file.

First, generate all the favicon formats and sizes you need. You can use a tool like AI Favicon to create the full set from a single image or text prompt. Once you have the files, upload them to Shopify's file hosting under Settings > Files. Copy the CDN URL for each uploaded file.

Then open your theme code. In your Shopify admin, go to Online Store > Themes, click the three dots on your active theme, and choose "Edit code." Find the theme.liquid file in the Layout section. Look for the closing </head> tag and add your favicon tags just above it.

theme.liquid (add before </head>)

<!-- Custom favicon overrides -->
<link rel="icon" type="image/x-icon" href="https://cdn.shopify.com/s/files/YOUR_STORE/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.shopify.com/s/files/YOUR_STORE/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.shopify.com/s/files/YOUR_STORE/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.shopify.com/s/files/YOUR_STORE/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://cdn.shopify.com/s/files/YOUR_STORE/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="https://cdn.shopify.com/s/files/YOUR_STORE/android-chrome-512x512.png">
<link rel="manifest" href="https://cdn.shopify.com/s/files/YOUR_STORE/site.webmanifest">

Replace YOUR_STORE with the actual path from your uploaded files. After you upload each file under Settings > Files, Shopify shows you the full CDN URL. Copy that entire URL and paste it into the href attribute.

The Web Manifest Problem

Shopify does not natively support a site.webmanifest file, and that creates an issue. The manifest needs to be served with the correct Content-Type header (application/manifest+json), and files uploaded to Shopify's CDN do not always get the right MIME type.

There are two workarounds. The first is to rename your manifest file to site.webmanifest.json before uploading. Shopify's CDN typically serves .json files with the correct content type, and most browsers accept it. The second approach is to host the manifest file externally, on something like a Cloudflare Worker, a Vercel edge function, or even a static GitHub Pages site. This gives you full control over headers and content.

If neither option appeals to you, you can skip the manifest and just include the individual link tags. You lose PWA install support, but all the icon formats will still work for bookmarks, home screen shortcuts, and tab icons.

The browserconfig.xml for Windows

Windows users who pin your site to their Start menu or taskbar use browserconfig.xml to find your tile icons. Shopify does not generate this file either. You can upload a browserconfig.xml file the same way as the manifest, but you hit the same MIME type issue.

browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="https://cdn.shopify.com/s/files/YOUR_STORE/mstile-150x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Honestly, Windows tile support is less important than it was five years ago. Microsoft Edge now uses standard favicons for most pinned sites, and the number of people pinning Shopify stores to their Start menu is small. I would prioritize Apple Touch Icons and Android Chrome icons over Windows tiles.

The Override Problem

One gotcha: the favicon you upload through the Shopify admin still generates its own <link> tag in the HTML. When you add your custom tags in theme.liquid, you end up with duplicate favicon declarations. Browsers generally use the last one they encounter, so put your custom tags after the {{ content_for_header }} Liquid tag. That way your tags appear later in the HTML and take priority.

Some themes also have their own favicon logic in the <head>. Search the theme.liquid file for "favicon" before adding your code. If the theme already has custom link tags for favicons, replace those instead of adding duplicates.

Testing your changes

After editing theme.liquid, clear your browser cache before testing. Browsers cache favicons aggressively, sometimes for days. Open an incognito window or a different browser to verify your new icons are loading. Use the Network tab in DevTools and filter for "icon" or "favicon" to confirm the correct files are being requested.

When to Bother

If you are running a small store and most of your traffic comes from social media links or Google, the default Shopify favicon is fine. A 32x32 PNG covers browser tabs, which is where most people see your favicon.

But if your store has repeat customers, mobile traffic above 50% (most stores do), or you want to look polished when someone saves your store to their phone's home screen, take the 15 minutes to add the extra formats. It is one of those small details that separates a professional-looking store from a default-looking one. And once the files are uploaded and the code is in place, you never have to touch it again.