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 Iconello 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.

Shopify's Built-in Favicon Limitations

To be specific about what Shopify's theme settings actually do under the hood: when you upload a favicon through Customize > Theme Settings > Favicon, the theme generates a single line of HTML. Depending on your theme, it looks something like this:

What Shopify's theme generates

<!-- This is ALL you get from Shopify's built-in favicon upload -->
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0XXX/XXXX/files/your-store_32x32.png?v=1234567890" type="image/png">

That is it. One tag, one size, one format. Here is what is missing and why each piece matters:

No apple-touch-icon. When an iPhone user taps "Add to Home Screen" for your store, iOS looks for a <link rel="apple-touch-icon"> tag. Without it, iOS takes a screenshot of the page and uses that as the icon. The result is a tiny, blurry rendering of your homepage instead of a clean icon. Over 60% of Shopify traffic is mobile, and a large portion of that is iOS.

No web app manifest. Android Chrome uses the manifest to determine icons for "Add to Home Screen" and installed PWA mode. Without a manifest, Android falls back to the basic favicon, which often looks pixelated at the 192x192 size Android needs.

No Open Graph / social preview image. While technically separate from favicons, social images are part of the same "brand icon ecosystem." Shopify themes handle OG images for products (using product photos), but your store's homepage and collection pages often have no OG image at all unless you set one manually.

No SVG favicon. Your store cannot adapt to dark mode browser tabs. Users with dark mode see your favicon against a dark tab bar, and if your icon is also dark, it disappears entirely.

Custom Snippet Approach

Instead of scattering favicon tags directly into theme.liquid, a cleaner approach is to create a dedicated snippet. This keeps your favicon logic organized and makes it easy to update without digging through the main layout file.

In your Shopify admin, go to Online Store > Themes > Edit Code. Under the Snippets folder, create a new snippet called custom-favicon.liquid. Paste in the following:

snippets/custom-favicon.liquid

{% comment %}
  Custom favicon snippet — replaces Shopify's default 32x32 favicon
  with a complete set of icons for all platforms.

  Upload all icon files to Settings > Files first, then replace
  the URLs below with the CDN URLs Shopify gives you.
{% endcomment %}

<!-- Standard favicon (ICO for legacy, PNG for modern) -->
<link rel="icon" type="image/x-icon" href="{{ 'favicon.ico' | file_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | file_url }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | file_url }}">
<link rel="icon" type="image/png" sizes="48x48" href="{{ 'favicon-48x48.png' | file_url }}">

<!-- SVG favicon for dark mode support (Chrome 80+, Firefox 41+) -->
<link rel="icon" type="image/svg+xml" href="{{ 'favicon.svg' | file_url }}">

<!-- Apple Touch Icon for iOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | file_url }}">

<!-- Android Chrome icons -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ 'android-chrome-192x192.png' | file_url }}">
<link rel="icon" type="image/png" sizes="512x512" href="{{ 'android-chrome-512x512.png' | file_url }}">

<!-- Theme color for mobile browser chrome -->
<meta name="theme-color" content="#ffffff">

Then, in your theme.liquid file, add this line inside the <head> tag, after the {{ content_for_header }} line so it overrides the default:

layout/theme.liquid

{{ content_for_header }}

{% render 'custom-favicon' %}

</head>

Notice the use of Shopify's file_url filter. When you upload files through Settings > Files, this filter automatically generates the correct CDN URL. This is better than hardcoding CDN URLs because it survives store migrations and CDN changes.

Shopify's CDN rewrites favicon URLs

Shopify's CDN processes uploaded files and may change their URLs. When you upload favicon-32x32.png, the actual served URL looks something like cdn.shopify.com/s/files/1/0XXX/XXXX/files/favicon-32x32.png?v=1709123456. The ?v= parameter is a cache-buster that changes if you re-upload the file. Always use the file_url Liquid filter instead of hardcoding URLs, as it handles the versioning automatically. If you hardcode a URL and later re-upload the file, browsers will keep showing the old cached version because the URL did not change.

Shopify App Store Options

There are several favicon apps in the Shopify App Store. Most of them do one thing: let you upload an image and convert it to a basic ICO or PNG favicon. That solves the problem of not having a design tool, but it does not solve the real issue, which is generating the full set of icons (apple-touch-icon, Android Chrome sizes, SVG, manifest) and injecting all the right HTML tags.

A few apps go further and generate multiple sizes, but they typically do not produce SVG favicons (no dark mode support) or web manifests. Before paying for an app, check if it generates at least: a 48x48 PNG (for Google Search), a 180x180 apple-touch-icon, and 192x192 + 512x512 PNGs for Android. If it only gives you a 32x32 PNG or an ICO, you are no better off than Shopify's built-in option.

The most effective approach is to generate your complete favicon set using a dedicated tool (like Iconello, which produces all formats and sizes from a single input), then upload the files to Shopify and use the snippet approach above. This separates the generation step from the Shopify integration step, and you get full control over both.

Testing on Shopify

Shopify's theme editor preview does not reliably show favicon changes. The customizer loads your store in an iframe, and the iframe's favicon behavior differs from a normal page load. Here is how to actually test your favicon changes:

Step 1: Preview the unpublished theme. If you are editing a non-live theme, click "Preview" to open it in a new tab. This gives you a real browser tab with a real favicon. Check the tab icon, then right-click the tab icon area and inspect the page source to verify your <link> tags are present and correct.

Step 2: Clear the browser cache. Browsers cache favicons aggressively, often in a separate cache from regular page resources. In Chrome, a regular cache clear (Ctrl+Shift+Delete) sometimes does not flush the favicon cache. The most reliable approach is to open your store URL in an incognito/private window. Alternatively, append a query string to your URL (?v=test123) which sometimes forces a fresh favicon fetch.

Step 3: Test across devices. Open your store URL on your phone. On iOS, tap Share > Add to Home Screen and check how the icon looks. On Android Chrome, tap the three-dot menu and choose "Add to Home screen." These are the actual contexts where your apple-touch-icon and Android icons appear, and they look different from what you see in a desktop browser tab.

Step 4: Verify in DevTools. Open Chrome DevTools on your store page. Go to the Network tab, filter by "favicon" or "icon" or "apple", and reload the page. You should see requests for each of your icon files. Check the HTTP status codes (all should be 200), the file sizes (make sure they are reasonable), and the Content-Type headers (should match the file format).

Quick DevTools check

// Paste in browser console to list all favicon-related tags
document.querySelectorAll('link[rel*="icon"], link[rel="apple-touch-icon"], link[rel="manifest"]')
  .forEach(el => console.log(el.rel, el.sizes?.value || '', el.href))

Use Google's Rich Results Test too

Google's Rich Results Test (search.google.com/test/rich-results) renders your page the way Googlebot sees it. Enter your store URL and check the rendered HTML for your favicon tags. This confirms that Google can find and access your favicon, which matters for how your store appears in search results.

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.