How to Set a Favicon on Shopify (Theme Editor Guide)
Where Shopify hides the favicon setting, what size to upload, and how to confirm it's live.
· 4 min read
Quick answer: Shopify sets the favicon inside the theme editor, not in a global store setting — go to Online Store > Themes > Customize, then find the favicon upload field under a Theme settings or General panel (exact wording varies by theme), and upload a square image.
Shopify doesn't have a store-wide, theme-independent favicon setting the way you might expect from a typical CMS. The favicon lives inside whichever theme is currently published, which has a real consequence worth knowing upfront: it's a per-theme setting, not a per-store one.
Where to find the setting
- In your Shopify admin, go to Online Store > Themes.
- Click Customize on your currently published theme.
- Look for a Theme settings panel, usually accessed via a gear icon or a settings tab in the left-hand sidebar of the theme editor.
- Inside that panel, look for a section named something like General, Favicon, or Branding — the exact label depends on the theme you're using, since Shopify's official and third-party themes each organize their settings panels a little differently.
- Upload your image in the favicon field and click Save.
If you can't find it right away, that's a naming issue rather than a missing feature — every mainstream Shopify theme exposes a favicon upload somewhere in theme settings, it's just not always under an obviously named section.
What size to upload
Shopify's stated minimum is a square image of 32×32 pixels, and it will accept an image that small. In practice, upload something bigger. A larger square source — 512×512px is a safe target — scales down cleanly to whatever Shopify actually needs, while a 32×32 source has nowhere to go if it ever needs to be used larger. Our favicon size guide explains why starting from a bigger source and downscaling always beats starting small, in more depth than fits here.
Keep the image square. A non-square upload will typically get cropped or squeezed to fit, and you won't get a preview granular enough to fine-tune exactly how.
Why your favicon can disappear after a theme change
Because the favicon setting is stored per-theme rather than per-store, it's genuinely easy to lose without doing anything wrong. Two common ways this happens:
- Publishing a new theme. If you switch your published theme — for a redesign, a seasonal refresh, or just testing a new one — the new theme starts with its own blank favicon field. Your old upload doesn't carry over automatically.
- Duplicating a theme for edits. If you duplicate your theme to make changes safely and then publish the duplicate, that's technically a different theme instance, and depending on how the duplication handled settings, the favicon field may not have carried across either.
If your favicon suddenly reverts to a blank browser icon or Shopify's default after a theme update, check the favicon field in theme settings before assuming something's broken elsewhere. It's one of the more common "where did my favicon go" causes on Shopify specifically, precisely because it isn't obvious that the setting is theme-scoped at all.
Confirming it's actually live
After saving, don't rely on your own browser tab as proof — favicons are cached unusually hard, and a tab you already had open may keep showing the old icon well after the new one is live. Open the storefront in a private/incognito window, or better, run the URL through a favicon checker to see exactly what file is being served right now, independent of your browser's cache. If it still looks wrong after that, our guide to stale favicon caching covers how to force a real refresh.
The limits of Shopify's favicon control
Shopify's theme editor gives you one favicon upload, and that's essentially it. It doesn't expose separate controls for an apple-touch-icon, nor does it let you manage a web app manifest with the multiple icon sizes and purposes that a proper installable PWA setup needs. Shopify generates what it generates from your single uploaded image, and merchants don't get a hand-editable <head> to add the rest themselves without editing theme code directly.
Practically, that means the home-screen icon quality you'd get from "Add to Home Screen" on a Shopify store is more limited than what you'd get building a favicon set by hand for a fully custom site — there's no dedicated 180×180 touch icon or 512×512 manifest icon slot to fill in through the admin. If that level of control matters for your store, it's something you'd need to add by editing the theme's theme.liquid file directly to insert additional <link> tags, which is outside what the theme editor's UI supports on its own. For most storefronts, though, the single favicon upload covers the case that actually matters: a recognizable icon in the browser tab. The favicon converter is a fast way to turn an existing logo into a clean, correctly-sized square before you upload it.
⇄ Try the Converter
Already have a logo, icon or PNG? Drop it in, adjust the background and padding, and download a complete favicon package — .ico, PNGs, Apple touch, manifest and the HTML snippet.
Open Converter