How to Add a Favicon to Your Shopify Store in 2025

Why Your Shopify Store Needs a Favicon

In the crowded digital marketplace of 2025, every detail matters. A favicon - that tiny icon appearing in browser tabs, bookmarks, and mobile home screens - might seem insignificant, but it's actually a powerful branding tool. When customers have multiple tabs open (and let's face it, they always do), your favicon helps them instantly spot your store.

Think of it as your digital shopfront sign, visible even when customers aren't actively browsing your site. A well-designed favicon builds trust, reinforces brand recognition, and gives your Shopify store that professional polish that sets you apart from competitors still sporting the default Shopify bag icon.

Before You Begin: Favicon Requirements

Getting your favicon right the first time saves frustration later. Here's what you need:

Size: 32x32 pixels (Shopify will automatically resize larger images)
Format: PNG or ICO format for best results
Design: Simple, bold, and recognisable at tiny sizes
Background: Consider how it looks on both light and dark browser themes

Pro tip: Upload a 512x512px PNG for the sharpest results. Shopify's image processing will create all necessary sizes whilst maintaining clarity.

Step-by-Step Guide: Adding Your Favicon

Step 1: Access Your Shopify Admin

Log into your Shopify store at yourstore.myshopify.com/admin. Make sure you have admin or staff permissions to edit themes.

Step 2: Navigate to Online Store

From your admin dashboard, click Online Store in the left sidebar. This opens your store's theme management area.

Step 3: Open Theme Customiser

Find your current live theme (it'll have a "Current theme" label) and click the Customise button. This launches Shopify's visual theme editor.

Step 4: Access Theme Settings

Look for the settings icon - it typically appears as a gear or paintbrush icon in the left sidebar. Click it to open Theme settings.

Step 5: Find Favicon Settings

Scroll through the theme settings until you find the Favicon or Browser icon section. The exact naming depends on your theme, but it's usually under "Brand" or "Logo" settings.

Step 6: Upload Your Favicon

Click Select image next to the favicon option. You can either:

Choose an existing image from your Shopify media library
Click Upload files to add a new image from your computer
Drag and drop your favicon file directly into the upload area

Step 7: Optional image details

After uploading, you can click Edit on that image in your media library to add descriptive details. This does not change how the favicon displays, but keeping assets labelled clearly helps you stay organised.

Step 8: Save Your Changes

Click Save in the top-right corner of the theme customiser. Your favicon is now live!

Troubleshooting Common Issues

Favicon Not Showing Up?

The most common culprit is browser caching. Try these fixes:

Clear your browser cache (Ctrl+Shift+Delete on Windows, Cmd+Shift+Delete on Mac)
Try a hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac)
Check in an incognito/private browser window
Wait 5-10 minutes for Shopify's CDN to propagate changes globally

Favicon Looks Blurry?

This usually means your source image is too small. Upload a larger image (512x512px recommended) and let Shopify handle the resizing for optimal quality across all devices.

Can't Find Favicon Settings?

Some older or custom themes might place favicon settings differently. Try looking under:

Theme settings -> Logo
Theme settings -> Header
Theme settings -> General

If you still can't find it, your theme might require manual code editing. Contact your theme developer or Shopify support for guidance.

Design Tips for Effective Favicons

Creating a favicon that works requires different thinking than designing a full-size logo:

Simplify ruthlessly: Remove text, fine details, and complex graphics
Use bold shapes: Strong geometric forms remain recognisable when scaled down
Maximise contrast: High contrast ensures visibility on various backgrounds
Test at size: Always preview your favicon at 16x16 and 32x32 pixels
Consider mobile: Your favicon becomes your app icon when customers save your store to their home screen

Beyond the Basics: Advanced Favicon Strategy

While Shopify handles the technical heavy lifting, understanding the broader favicon ecosystem helps you make better design decisions:

The Full Favicon Suite

Modern browsers and devices use various icon sizes. Shopify automatically generates:

16x16px and 32x32px for browser tabs
180x180px Apple touch icon for iOS devices
192x192px and 512x512px for Android devices
Various sizes for Windows tiles and other platforms

Advanced: full app treatment (manifest, icons, theme colour)

If you want the proper installable experience on mobile and a nicely coloured browser bar, add a tiny bit of theme code. Yes, that code editor in Shopify that looks suspiciously like VS Code - you can use that.

1Upload files to your theme assets:

- apple-touch-icon.png (180x180)

- android-chrome-192x192.png and android-chrome-512x512.png

- manifest.webmanifest.liquid (note the .liquid so you can use variables)

1In theme.liquid, inside <head>, add links to your icons and manifest:

<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">
<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="icon" type="image/png" sizes="192x192" href="{{ 'android-chrome-192x192.png' | asset_url }}">
<link rel="icon" type="image/png" sizes="512x512" href="{{ 'android-chrome-512x512.png' | asset_url }}">
<link rel="manifest" href="{{ 'manifest.webmanifest' | asset_url }}">
<meta name="theme-color" content="#ffffff">

1Create manifest.webmanifest.liquid with your shop details:

{
  "name": "{{ shop.name }}",
  "short_name": "{{ shop.name }}",
  "icons": [
    { "src": "{{ 'android-chrome-192x192.png' | asset_url }}", "sizes": "192x192", "type": "image/png" },
    { "src": "{{ 'android-chrome-512x512.png' | asset_url }}", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

1Test installation

- Chrome (Android): Menu -> Install app

- Safari (iOS): Share -> Add to Home Screen

- Desktop Chrome: Install icon in the address bar

Seasonal Favicon Updates

Consider updating your favicon for holidays or special promotions. It's a subtle way to show your store is actively maintained and can create urgency around sales events.

Privacy-First Alternative: Generate Your Own

Concerned about uploading your brand assets to online tools? Try Unwrite's privacy-first Favicon Generator. All processing happens in your browser - your logo never leaves your device. Generate a complete favicon suite in seconds, perfectly optimised for Shopify and beyond.

Final Thoughts

Take two minutes to generate a clean icon set and drop it into your theme settings. If you want the files done properly without guesswork, use the Favicon Generator. While you are there, tighten microcopy with Unwrite GPT and keep brand PDFs tidy with our PDF Tools.