How to Add a Favicon to Shopify
A step-by-step guide to adding a custom favicon (browser icon) to your Shopify store. Covers desktop and mobile instructions, recommended sizes, file formats, and troubleshooting when your favicon won't appear.
Before you start: create your favicon
You need a favicon file before you can upload it to Shopify. If you already have one, skip to the instructions below. If not, you can create one in seconds using EasyFavicon — pick an emoji, type a letter, or upload a logo, choose a background, and download a ready-to-use favicon PNG.
- Dimensions: 16×16px or 32×32px. Shopify recommends these sizes. If you upload a larger image, it will be automatically resized to 32×32px. A 32×32px square PNG is the sweet spot.
- Format: PNG (preferred). JPG and ICO are also accepted, but PNG supports transparency and produces the sharpest result at small sizes.
- Keep it simple. Favicons display at 16×16px in browser tabs. Complex images and small text become unreadable. A bold icon, letter, or emoji works best.
- Use high contrast. A dark icon on a light background (or vice versa) ensures visibility in both light and dark browser themes.
Plan requirement: Custom favicons are available on the Shopify Basic plan and above. If you're on the Starter plan, you cannot add a custom favicon — you would need to upgrade first.
How to add a favicon on Shopify (desktop)
Adding a favicon to your Shopify store takes less than a minute. Follow these steps from your Shopify admin dashboard on desktop:
- Go to Online Store → Themes. From your Shopify admin, click Online Store in the left sidebar, then click Themes.
- Click Customize. Find your current (published) theme and click the Customize button. This opens the theme editor.
- Open Theme settings. In the theme editor, click the gear icon (⚙️) in the left sidebar to access Theme settings.
- Find the Favicon section. Depending on your theme version, click either Logo or Favicon. The favicon uploader will be inside one of these sections. Most modern themes (Dawn, Sense, Craft) use the Logo section.
- Upload your favicon image. In the Favicon image area, click Select image. You can pick an image already uploaded to your Shopify files or click Add images to upload a new one from your computer.
- (Optional) Add alt text. Click Edit on the favicon image and enter a brief description in the Alt text field. This helps with accessibility.
- Save. Click Save in the top-right corner. Your new favicon is now live on your storefront.
Quick path:
Online Store → Themes → Customize → ⚙️ Theme settings → Logo (or Favicon) → Favicon image → Select image → Save
⚠️ Don't test in the Theme Editor
Shopify does not display favicons inside the Theme Editor — it only shows them on your live storefront. After saving, open your store in a regular browser tab (not the editor) to see your new favicon.
How to add a favicon on Shopify (mobile)
You can also set your favicon from the Shopify mobile app. The steps are nearly identical:
- From the Shopify app, tap the ☰ icon to open the menu.
- In the Sales channels section, tap Online Store.
- Tap Manage all themes.
- Find your current theme and tap Customize.
- Tap … → Theme settings.
- Tap Logo or Favicon (depending on your theme).
- In the Favicon image section, tap Select image, upload your image, and tap Done.
- Tap Save or ✓.
Recommended favicon size and format for Shopify
| Property | Recommendation | Notes |
|---|---|---|
| Dimensions | 16×16px or 32×32px | Larger images auto-resize to 32×32px |
| Format | PNG (preferred), JPG, or ICO | PNG supports transparency and sharpest result |
| File size | Under 1MB | Shopify accepts files up to 1MB; smaller loads faster |
| Aspect ratio | 1:1 (square) | Non-square images may appear distorted |
| Plan required | Basic plan or higher | Starter plan does not support custom favicons |
Troubleshooting: Shopify favicon not showing
It's common for a new favicon to take a few minutes to appear — and sometimes it feels like it's not working at all. Here are the most common fixes, ordered by how often they solve the problem:
1. You're looking in the Theme Editor, not the live site
This is the #1 reason people think their favicon didn't save. Shopify does not display favicons inside the Theme Editor. You must open your actual store URL (e.g. yourstore.com) in a new tab to see your favicon. Close the theme editor, open your live store, and check — it's probably there.
2. Hard-refresh your browser
Your browser caches the old favicon and won't fetch the new one until you force it. Do a hard refresh:
- Chrome / Firefox / Edge: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)
- Safari: Hold Option (⌥) and click the refresh button, or Cmd + Option + R
3. Clear your browser cache
If a hard refresh doesn't work, clear the full cache. In Chrome: go to Settings → Privacy and Security → Clear browsing data → select “Cached images and files” → Clear data. Then reload your store.
4. Test in an incognito window
Open a private/incognito window and visit your store. Incognito mode has no cached favicon, so if your new favicon appears there, the issue is a cache problem on your main browser — your Shopify settings are fine.
5. Check your plan
Custom favicons are not available on the Shopify Starter plan. If you're on Starter, you cannot add a favicon — you'd need to upgrade to Basic or higher. You can check your plan under Settings → Plan in your Shopify admin.
6. Customer Accounts and Checkout pages
Favicons do not appear on Shopify Customer Accounts or Checkout pages unless you're on the Shopify Plus plan. This is expected behavior — Shopify uses its own favicon on these pages for security. If you're on Plus, you'll need to use the Branding API to set favicons on these pages.
Making a Shopify favicon from scratch
If you don't have a logo or icon ready, you have several options:
- Use an emoji. Pick a bold, simple emoji (🛒, 🏪, ⚡, 💎, 🚀), set it on a colored or gradient background, and download as a PNG. Emojis are ideal for Shopify stores — they're universally recognized, render consistently, and match the playful energy of many DTC brands. See the emoji favicon guide for ideas.
- Create a letter mark. Type your brand's initials (1–2 characters), choose from 8 Google Fonts, pick colors, and export. Letter favicons are clean, scalable, and widely used by ecommerce brands. See the text favicon guide.
- Convert a logo or image. Upload a PNG, JPG, or SVG of your store logo and have it resized to 32×32px automatically. The generator crops and fits it into a square favicon at the exact size Shopify needs.
- Use an SVG. If you have an SVG version of your logo (common for Shopify stores that design in Canva, Figma, or Illustrator), you can convert it directly to a favicon PNG at 32×32px. See the SVG to favicon guide.
Ready to create your Shopify favicon? Pick an emoji, type a letter, or upload your logo — all processed in your browser, nothing uploaded to a server.
Generate your Shopify favicon →Beyond Shopify: favicons for other platforms
Building on a different platform or want to learn more? We have guides for those too:
- Squarespace favicon guide — how to change your favicon on Squarespace 7.1 and 7.0
- WordPress favicon guide — adding a favicon via Customizer, plugins, or theme code
- How to install a favicon — universal guide covering HTML, Next.js, and more
- Favicon sizes guide — all the dimensions you need for every platform
- What is a favicon? — the complete overview for beginners