Skip to content

Fix · Custom Favicon

How to Add a Custom Favicon to Your Shopify Store

The favicon is the small icon in the browser tab — easy to overlook, but high-attention shoppers register it subconsciously. A default Shopify shopping-bag favicon signals the store hasn't finished basic setup, which casts doubt on whether the operator has finished the rest of the business. This guide walks through replacing it in under 5 minutes, plus the size and format choices that look crisp on Retina displays.

⏱ 5 minutesImpact · lowDetection · dom

Last updated: May 12, 2026

Why this matters

The default Shopify favicon is a visual marker buyers have seen on thousands of stores — including abandoned ones, test environments, and stores that obviously didn't ship. Replacing it with your own brand mark removes that signal and tells the buyer: this store has been built to completion, not just thrown together.

Favicons also matter for bookmarks, browser history, and tab-management. A custom favicon makes your store findable when a buyer who scanned earlier returns to multiple open tabs days later. The cost is 5 minutes; the benefit is small per shopper but persistent.

How to check if you have this issue

Open your store in a browser tab. Look at the browser tab icon — if it shows the default Shopify shopping-bag, you have this issue. If you see a tab with no icon at all (just a generic web globe), the favicon either isn't set OR your browser is caching an old version (try opening in private/incognito mode to be sure).

Also check on mobile. Some browsers and operating systems use the favicon for 'Add to Home Screen' icons. A missing favicon on mobile shows up as a generic placeholder, which is exactly the wrong signal at that point of conversion.

Or skip the manual check — run a free 30-second scan and we'll tell you.

Step-by-step fix

  1. 1

    Confirm your plan supports favicons

    1 min

    Favicons are available on Shopify Basic plan and higher. The Starter plan does not support custom favicons — if you're on Starter, you'll need to upgrade or accept the default. Check Settings → Plan in your admin to confirm.

  2. 2

    Prepare a 32x32px PNG of your logo mark

    3 min

    Shopify recommends 32x32 pixels. Larger images get scaled down automatically, but starting at 32x32 (or 64x64 for sharper Retina rendering) avoids quality loss. Use a logo mark, not a full wordmark — at this size, text is illegible. PNG with transparent background works on both light and dark browser themes. If you don't have a logo file, free tools like favicon.io can generate a favicon from text, an emoji, or a square image.

  3. 3

    Upload through Theme settings

    1 min

    From your Shopify admin, go to Online Store → Themes → click Customize on your active theme. Click the gear icon in the bottom-left to open Theme settings. Click 'Logo' or 'Favicon' (the exact label depends on theme version — Dawn uses 'Favicon'). In the Favicon image section click 'Select image' → 'Add images' → pick your file → confirm with the checkbox. Add brief alt text describing the image ("StrangerProof logo mark"). Click Save.

  4. 4

    Verify in private mode

    1 min

    Open a private/incognito browser tab and visit your store. The new favicon should appear in the tab immediately. If you only see the old one in a regular tab, that's browser caching — it'll refresh on its own within a day. Test on mobile too: open your store in mobile Safari/Chrome, tap Share → 'Add to Home Screen' — the home screen icon should now show your custom favicon, not a generic globe.

Common mistakes to avoid

  • Using a full wordmark or detailed logo at favicon size — at 32x32 pixels, anything more complex than a single icon or two letters becomes unreadable visual noise.
  • Forgetting to test in private mode. Browser caching can show you the OLD favicon for days even after you've updated it; new visitors see the new one immediately, but you might not.
  • Uploading a non-square image. The favicon container is square, and rectangular logos get cropped or distorted. Crop to square or add transparent padding before uploading.
  • Using a low-resolution source image. A 16x16 source scaled up to 32x32 looks blurry; start at 32x32 or higher and let Shopify scale down.
  • Skipping alt text. Accessibility tools and search engines use the alt text for the favicon image; a missing alt is a small accessibility miss.

What success looks like

  • ✓Opening your store in a private browsing tab shows your custom favicon in the browser tab, not the Shopify default.
  • ✓The favicon is recognizable at 32x32 — you can identify the brand from the icon alone, not just by reading the tab text.
  • ✓On mobile, adding your store to the home screen produces a clean icon, not a generic placeholder.
  • ✓Old favicon doesn't reappear after browser cache clears (test by clearing your cache or using a different browser).

Want the full reasoning behind why we score this signal? Read the methodology for Custom Favicon →

Related fixes

Custom Domain →

A polished favicon on a myshopify.com subdomain undercuts the brand work. Both signals together establish 'this is a real business with finished infrastructure.'

Professional Footer →

Favicon and footer are both 'attention to detail' signals operating on different parts of the page. Fix both for compounding effect.

You know how to fix Custom Favicon.
But does your store actually have the issue?

You just read the playbook. 30 seconds to find out which of the 14 trust signals your store actually fails — including Custom Favicon.

Find Out Free — 30 Seconds
✓ No signup required✓ All 14 signals scored✓ Done in 30 seconds