A Shopify theme needs exactly one favicon size: a 32 × 32 px square PNG, uploaded in the theme editor. Shopify scales anything bigger down to that size, so a 512 px upload doesn’t make the tab icon sharper. It just hides how bad your logo looks at 32 px until it’s live. The other sizes you see in favicon lists (16, 48, 180, 192, 512) only matter if you or a developer add them to the theme code.
My opinion, plainly: stop hunting for the “right” size and start designing for 32 px. Almost every blurry Shopify favicon I see is the right size and the wrong image: a full wordmark squeezed into a box the size of a fingernail. If you want to check yours, the free Favicon Generator for Shopify shows the real 16 and 32 px pixels before you upload anything, and it runs in your browser.
Every favicon size, and whether your store needs it
| Size | Where it shows up | Does a Shopify store need it? |
|---|---|---|
| 32 × 32 PNG | Browser tabs, bookmarks, history | Yes. This is the one the theme editor asks for. |
| 16 × 16 | Small tabs, older browsers | No. Browsers shrink the 32 px icon when they need it. |
| 48 × 48 | Windows shortcuts, Google search results | Nice to have. Google wants a square icon and recommends at least 48 px. |
| 180 × 180 | iPhone and iPad “Add to Home Screen” | Only if you add an Apple touch icon tag to the theme code. |
| 192 and 512 | Android home screen, web app manifests | Rarely. Most stores never ship a manifest. |
| favicon.ico | Old browsers, non-Shopify sites | No. The theme editor takes an image like PNG, not .ico. |
So the honest checklist for most stores is one line long. Make a 32 × 32 PNG that still reads at that size, upload it, done. Everything else is optional polish for people comfortable editing theme.liquid.
Why 32 px changes how you design the icon
A 32 × 32 icon is 1,024 pixels in total. A 16 × 16 tab is 256. That’s the whole canvas. Thin strokes, small text and soft gradients don’t shrink gracefully at that size. They turn into grey blur, because each pixel ends up as an average of several lines.
The fix isn’t a bigger file. It’s a simpler shape: one letter, a monogram or the symbol from your logo, bold strokes, strong contrast, and a little padding so it doesn’t touch the edges. Around 5–12% padding usually looks right next to other tabs.
Worked example: why your full logo fails at 32 px
Say your logo is a 1200 × 300 px wordmark that spells out a 16-letter store name. Fit it into a 32 × 32 square with 8% padding on each side:
- Usable width: 32 − (2 × 2.56) ≈ 27 px.
- Logo height at that width: 27 × 300 ÷ 1200 ≈ 7 px.
- Width per letter: 27 ÷ 16 ≈ 1.7 px.
Less than two pixels per letter, seven pixels tall. Nobody can read that. It shows up as a thin grey stripe in the middle of the tab. Now take just the first letter of the name, bold, centred, same padding: it gets the full 27 × 27 px. That is roughly 4 times the height and 16 times the width per character. Same favicon size, completely different result.
Worked example: where “upload the biggest image” is the wrong answer
The obvious move is to upload a 1024 px version “for sharpness”. Here is what actually happens:
- Shopify scales it down to 32 × 32 for the tab, so the extra pixels are thrown away.
- You never see the 32 px result in the theme editor, because the editor preview doesn’t show the storefront favicon. You only find out on the live store, often after a customer’s tab has already cached it.
- If the logo is dark on a transparent background, it can vanish on dark-mode tabs. Chrome’s dark tab is close to #202124, so a navy or black mark nearly disappears.
Making the 32 px file yourself flips this around. You see the real pixels, light and dark, before you upload. That’s the one reason I’d never just drop a big logo into the setting and hope.
Worked example: the Apple touch icon that turns black
Take a store that adds a 180 × 180 Apple touch icon with a transparent background. On an iPhone home screen, iOS fills the transparent areas with black. A black logo on transparent becomes a black square. The fix is simple: give the 180 px icon a solid background, white or your brand colour. The favicon generator does this automatically for that size, even if you picked transparent for the tab icon.
What changes how your favicon looks
| Change | From → to | Effect at 32 px |
|---|---|---|
| Content | Full wordmark → one letter or symbol | The biggest win. Readable instead of a smudge. |
| Padding | 0% → about 8% | Stops it looking cramped next to other tabs. |
| Stroke weight | Thin → bold | Thin lines blur into the background. |
| Background | Transparent dark logo → solid or light outline | Stays visible on dark-mode tabs. |
| Shape | Square → rounded square or circle | A matter of taste, but it can look neater in a row of tabs. |
Why the favicon doesn’t update after you save
Three usual causes. Browsers cache favicons hard, so check in a private window or another browser. You may have edited an unpublished theme, and only the published theme changes the live favicon. And Google search results can take days or weeks to show a new icon. Also note that favicons aren’t available on Shopify’s Starter plan.
What I’d do
- Pick one mark, not the whole logo. A single letter or your logo’s symbol, bold, with about 8% padding. If you can’t read it at 16 px, simplify it again.
- Make the 32 × 32 PNG yourself and check it in light and dark. Use the favicon generator, look at the zoomed 16 and 32 px previews and the dark tab, then download favicon-32×32.png.
- Upload it in Online Store → Themes → Customize → Theme settings, then test the live store. Save, open the store in a private window and look at the tab. Skip the 180, 192 and 512 px sizes unless a developer is adding them to the theme code.
If you’re tidying up store images at the same time, Resize Shopify Product Image to 2048px covers product photos, and Compress a Product Photo to 100KB Without Blur explains how to keep them small without losing detail.
Work with me
I’m Faraz, a Shopify and AI automation consultant. If your store needs its branding, theme settings and images cleaned up properly, or small browser tools built for your own workflow, I can help. Get in touch at farazhussain.com or WhatsApp +92 334 3454747.
Examples are illustrative. Theme settings and browser behaviour change over time, so check your own theme and the live store after any change.