Favicon Generator for Shopify Themes
Upload your logo (PNG, JPG, WebP or SVG) and this tool makes the 32 × 32 PNG that Shopify’s theme editor recommends, plus the 16, 48, 180 (Apple touch), 192 and 512 px icons and a multi-size favicon.ico. Download them one by one or as a ZIP. Everything runs in your browser, so your logo is never uploaded to a server.
My one rule: don’t upload your full wordmark as a favicon. At 32 px a long logo turns into a grey smudge. Use one letter, a monogram or the symbol from your logo, and pad it so it doesn’t touch the edges.
Settings
Transparent works for browser tabs. iPhones fill transparent areas of the 180 px Apple touch icon with black, so the tool always gives that one a solid background (white if you chose transparent).
How to add the favicon in Shopify
- Download favicon-32×32.png above (it’s the highlighted one).
- In your Shopify admin, go to Online Store → Themes and click Edit theme (or Customize) on the theme you want.
- Open Theme settings (the gear icon). Depending on your theme version, the favicon lives under Logo or Favicon.
- In the Favicon image section, click Select image, upload the PNG, select it and click Done.
- Click Save, then open your store in a private window to check the browser tab.
The theme editor preview doesn’t show the storefront favicon, so always check the live store. Shopify recommends 32 × 32 px and scales bigger uploads down to that size. Favicons aren’t available on the Starter plan.
Which favicon sizes a Shopify store actually needs
| File | Size | Where it’s used |
|---|---|---|
| favicon-32×32.png | 32 × 32 | The one you upload in the Shopify theme editor. Browser tabs and bookmarks. |
| favicon-16×16.png | 16 × 16 | Older browsers and small tab sizes. |
| favicon-48×48.png | 48 × 48 | Windows shortcuts. Google asks for favicons in multiples of 48 px for search results. |
| apple-touch-icon.png | 180 × 180 | iPhone and iPad “Add to Home Screen”. |
| android-chrome-192×192.png / 512×512.png | 192 / 512 | Android home screen and web app manifests. |
| favicon.ico | 16 + 32 + 48 | Non-Shopify sites and old browsers. Shopify’s theme editor wants an image like PNG instead. |
For most stores, the 32 × 32 PNG is all you need. The other sizes are for developers who add an Apple touch icon to the theme code (snippet below), or for your other sites.
Optional: Apple touch icon snippet for theme.liquid
Only if you’re comfortable editing theme code. Duplicate your theme first, upload apple-touch-icon.png to the theme’s assets folder, then paste this inside head in layout/theme.liquid.
Why a Shopify favicon looks blurry or doesn’t update
- Too much detail: thin lines and small text vanish at 32 px. Bold shapes and high contrast win.
- No padding, or too much: 5–12% padding usually looks right next to other tabs.
- Browser cache: browsers hold on to old favicons. Check in a private window or a different browser before assuming it didn’t save.
- Wrong theme: you edited an unpublished theme. The live favicon changes only on the published one.
FAQ
What size should a Shopify favicon be? 32 × 32 px, as a square PNG. Shopify scales larger images down to 32 × 32, but making it yourself lets you check it still reads at that size.
Is my logo uploaded anywhere? No. The tool uses your browser’s Canvas API. Your file never leaves your device and nothing is stored.
Can I use an SVG logo? Yes. The SVG is drawn at high resolution in your browser and exported as PNG. Shopify’s favicon setting takes PNG or JPG, so upload the PNG.
Should the background be transparent? For the tab icon, usually yes. If your logo is dark, a transparent icon disappears on dark-mode tabs. Check the dark tab preview and add a white or brand-colour background if it does.
Why does my favicon show the old icon? Caching. Save in the theme editor, then open the store in a private window. Google search results can take days or weeks to pick up a new favicon.