Favicon for Shopify: How to Add a Custom Icon to Your Online Store

Your Shopify store needs a favicon. Without one, you're showing Shopify's generic icon in browser tabs—or worse, a blank placeholder that screams "this store isn't quite finished." Neither inspires the trust you need when asking customers to hand over their credit card information.

The good news: Shopify makes basic favicon implementation dead simple. The not-so-good news: the default approach leaves gaps that can hurt your brand consistency across different devices and platforms. I've audited hundreds of Shopify stores, and the same favicon issues come up repeatedly.

This guide walks you through everything—from the 30-second basic setup to the advanced implementations that ensure your store icon looks perfect whether a customer finds you in a browser tab, saves you to their phone's home screen, or pins you in their favorites.

The Quick Method: Adding a Favicon Through Shopify Admin

Let's start with the standard approach that works for most store owners.

Step-by-Step Favicon Upload

Log into your Shopify admin panel
Navigate to Online Store → Themes
Click Customize on your active theme
In the theme editor sidebar, click Theme settings (the gear icon)
Look for Favicon or Browser icon (exact wording varies by theme)
Upload your image
Click Save

That's it for the basics. Your favicon should appear within minutes, though browser caching can delay visibility (more on that shortly).

Shopify's Favicon Requirements

Shopify's official recommendation is a square PNG or JPG image, at least 32x32 pixels. However, uploading at that minimum size is a mistake I see constantly.

Here's what actually works best:

Optimal upload size: 512x512 pixels

Shopify automatically generates smaller sizes from your upload, so starting with a high-resolution source file ensures crisp results at every dimension. Upload a 32x32 image, and Shopify has nothing to work with when creating larger versions for touch devices.

Format: PNG with transparency

If your favicon design doesn't fill the entire square (most don't), you need transparency. JPG doesn't support transparency, so your carefully designed icon ends up with an ugly white box behind it. Always use PNG.

File size: Under 1MB

Shopify accepts files up to 20MB, but there's no reason to upload anything close to that. A properly optimized 512x512 PNG should be well under 100KB.

Why the Default Shopify Favicon Setup Falls Short

The built-in Shopify favicon feature handles the basics, but it has limitations that matter for serious stores.

Limited Size Generation

When you upload through the theme settings, Shopify generates a handful of sizes—typically 16x16, 32x32, and sometimes 180x180 for Apple Touch Icons. But modern favicon implementation calls for more sizes:

16x16: Browser tabs (standard displays)
32x32: Browser tabs (high-DPI/Retina displays)
48x48: Windows site shortcuts
180x180: Apple Touch Icon
192x192: Android Chrome
512x512: PWA splash screens

Many Shopify themes don't generate all of these automatically, which means customers on certain devices see a blurry or missing icon.

No SVG Support

Shopify's built-in favicon feature doesn't support SVG favicons—the modern format that offers infinite scalability and smaller file sizes. If you want SVG favicon support (and you should consider it), you'll need to implement it manually through theme code.

Theme-Dependent Behavior

Here's something that catches many store owners: favicon implementation varies significantly between Shopify themes. Some themes have robust favicon handling with multiple size outputs. Others have minimal implementations that only generate one or two sizes.

I've tested this across dozens of themes. Dawn (Shopify's default free theme) handles favicons reasonably well. But many third-party themes—including some expensive premium options—have surprisingly poor favicon implementations.

Advanced Favicon Implementation for Shopify

If you want complete control over your Shopify store's favicon, you'll need to edit your theme code. Don't worry—it's simpler than it sounds.

Accessing Your Theme Code

Go to Online Store → Themes
Click Actions → Edit code on your active theme
In the Layout folder, open theme.liquid

This file contains the <head> section where favicon links belong.

The Complete Favicon Code Block

Add this code inside the <head> section of theme.liquid, replacing any existing favicon references:

<!-- Favicon Implementation -->
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">
<link rel="manifest" href="{{ 'site.webmanifest' | asset_url }}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

Uploading Your Favicon Files

After adding the code, you need to upload the actual favicon files:

In the theme editor, go to Assets folder
Click Add a new asset
Upload each of your favicon files:
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png

For the web manifest file (which handles Android and PWA icons), create a file named site.webmanifest with this content:

{
  "name": "Your Store Name",
  "short_name": "Store",
  "icons": [
    {
      "src": "/cdn/shop/files/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/cdn/shop/files/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

You'll need to upload the 192x192 and 512x512 PNG files through Settings → Files in your Shopify admin, then update the paths in the manifest to match Shopify's CDN URLs.

Shopify Theme-Specific Favicon Quirks

Different Shopify themes handle favicons differently. Here's what I've encountered across popular themes:

Dawn Theme

Shopify's flagship free theme has decent favicon handling. The favicon setting is under Theme settings → Logo → Favicon image. It generates multiple sizes automatically, but you may still want to add manual code for complete coverage.

Debut Theme (Legacy)

If you're still running Debut, the favicon setting is under Theme settings → Favicon. This older theme has more limited automatic size generation—definitely consider manual implementation for better results.

Premium Themes (Turbo, Impulse, etc.)

Third-party premium themes vary wildly. Some have sophisticated favicon handling with options for separate Apple Touch Icons. Others rely entirely on Shopify's default processing. Always check what your theme actually outputs by viewing your page source after setting up the favicon.

Checking Your Theme's Output

To see exactly what favicon tags your theme generates:

Visit your store's homepage
Right-click and select View Page Source
Search for "favicon" or "icon" in the source
Review the link tags present

This tells you whether you need to supplement with manual code.

Common Shopify Favicon Problems (And How to Fix Them)

Problem: Favicon Won't Update After Upload

This is the most common issue, and it's almost always browser caching. Shopify also uses CDN caching, which can add another layer of delay.

Solutions:

Hard refresh: Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Clear browser cache: Clear specifically for your domain
Test in incognito: Open a private/incognito window to bypass cache
Wait it out: Shopify's CDN can take up to 24 hours to propagate changes

If none of these work, try re-uploading the favicon with a slightly different filename, then update your theme code to reference the new file.

Problem: Favicon Looks Blurry

You uploaded a low-resolution source file. Shopify can only generate what you give it—if you upload 32x32, that image gets stretched for larger sizes, causing blur.

Solution: Upload a 512x512 PNG as your source, or manually create and upload each size for optimal sharpness.

Problem: Favicon Shows on Desktop but Not Mobile

Your Apple Touch Icon likely isn't set up correctly. The standard Shopify favicon upload doesn't always generate proper iOS icons.

Solution: Manually add the apple-touch-icon link tag and upload a 180x180 PNG file specifically for iOS devices.

Problem: Old Shopify Favicon Still Appears

If you see the generic Shopify bag icon, your theme might not be outputting your uploaded favicon correctly.

Solutions:

Check that you saved the theme settings after uploading
View page source to confirm the favicon link exists
Try the manual code implementation method
Contact your theme developer if the issue persists

Problem: Favicon Works in Chrome but Not Safari

Safari is notoriously aggressive with favicon caching. It can hold onto old favicons for weeks.

Solution: Clear Safari's favicon cache specifically:

Quit Safari completely
Navigate to ~/Library/Safari/Favicon Cache/ on Mac
Delete the cache files
Restart Safari

Favicon Design Considerations for Ecommerce

Ecommerce favicons have different requirements than other websites. When customers have 15 tabs open while comparison shopping, your favicon needs to stand out.

Brand Recognition Is Everything

Your customers should instantly recognize your store in their browser tabs. This usually means:

Using your logo mark (the symbol, not the wordmark)
Maintaining your brand colors
Keeping the design extremely simple

A common mistake: trying to fit your entire logo—text and all—into a 16x16 pixel space. It never works. Extract the most recognizable element and use that.

Color Matters More in Tabs

Browser tab backgrounds are typically light gray or white. If your favicon is also light, it can disappear visually. Test your favicon against common browser tab colors:

Chrome's light gray tab bar
Safari's white/silver tabs
Firefox's light and dark themes

A thin dark outline or slightly darker background color can help lighter favicons pop without altering your brand colors dramatically.

Consider Your Competition

When a customer has multiple similar stores open, your favicon competes directly with competitors. I've seen this cause real conversion issues—customers accidentally close your tab thinking it was a competitor's, or can't quickly find your tab when ready to purchase.

Look at what other stores in your niche use for favicons. Differentiation matters.

If you're struggling to distill your brand into a tiny icon, our favicon generator can help. You can generate dozens of unique favicon concepts instantly and find one that captures your brand essence at any size.

Testing Your Shopify Favicon

After implementation, test across multiple scenarios:

Browser Testing Checklist

Device Testing Checklist

Quick Test Method

The fastest way to test your Apple Touch Icon on iOS:

Open your store in Safari on an iPhone
Tap the Share button
Select "Add to Home Screen"
Check the icon preview—this shows exactly what iOS will display

If it looks blurry or wrong, your Apple Touch Icon needs attention.

Performance Considerations

Favicons are tiny files, but they still affect your store's performance metrics.

File Size Optimization

Before uploading to Shopify, optimize your favicon files:

Use tools like TinyPNG or ImageOptim to compress PNGs
Target under 5KB for 32x32 files
Target under 20KB for 512x512 files

Caching Benefits

The good news: favicons are cached aggressively by browsers. After the first load, they're rarely re-downloaded. This means even if your favicon files are slightly larger than ideal, the impact is minimal for returning customers.

CDN Advantage

Shopify serves all assets through its CDN (Content Delivery Network), meaning your favicon loads quickly regardless of where your customers are located. You don't need to do anything special to benefit from this—it's automatic.

Favicon Maintenance for Shopify Stores

Once set up, favicons require minimal maintenance. But there are scenarios that warrant revisiting your implementation:

When to Update Your Favicon

Rebranding: Obviously, any logo change should include favicon updates
Theme change: New themes might override your manual code
Shopify updates: Occasionally, platform changes affect favicon handling
Poor recognition feedback: If customers mention difficulty finding your tab

Annual Favicon Audit

Once a year, test your favicon across current browsers and devices. Browser updates can introduce new requirements or change how favicons display. A quick 10-minute test ensures you're not showing outdated or broken icons.

Wrapping Up

Getting your Shopify favicon right is a small investment that pays dividends in brand consistency and customer trust. The basic setup takes under a minute. The advanced implementation takes maybe 15 minutes but gives you complete control.

For most stores, here's the action plan:

Upload a high-quality 512x512 PNG through your theme settings
Test across browsers and devices
If you notice gaps, implement the manual code approach
Consider generating professional favicon variations if your current design isn't working at small sizes

Your favicon is one of countless small details that add up to either a professional, trustworthy store or one that feels slightly unfinished. It's worth getting right.

Frequently Asked Questions

What size should my Shopify favicon be?

Upload a 512x512 pixel PNG through Shopify's theme settings. This gives Shopify a high-quality source to generate smaller sizes automatically. If you're implementing manually, create separate optimized files at 16x16, 32x32, 180x180, 192x192, and 512x512 pixels.

Why isn't my new Shopify favicon showing up?

Browser and CDN caching are the usual culprits. Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), test in an incognito window, or clear your browser cache. Shopify's CDN can sometimes take up to 24 hours to reflect changes, though it's usually much faster.

Can I use an SVG favicon on Shopify?

Not through the standard theme settings—Shopify's built-in favicon feature only accepts PNG and JPG. However, you can add SVG favicon support by editing your theme.liquid file and uploading an SVG file to your theme assets. Note that SVG favicons have limited browser support, so you'll want PNG fallbacks.

How do I add a favicon to my Shopify store's checkout page?

Shopify's checkout uses your standard favicon automatically. If you're on Shopify Plus with a customized checkout, ensure your checkout.liquid file includes the proper favicon link tags, or the checkout will inherit the default Shopify icon.

Do I need different favicons for mobile and desktop?

You need different sizes, but typically the same design. The 180x180 Apple Touch Icon and 192x192 Android icon should be high-resolution versions of your standard favicon. If your design looks significantly different at larger sizes (more detail, different proportions), you might create mobile-specific versions—but maintaining brand consistency usually matters more than mobile-specific optimization.