Everything you need to know about adding a favicon to your Shopify store. I'll walk you through what favicons are, why they matter, and exactly how to get yours looking perfect in browser tabs. Plus design tips that actually work at tiny sizes. Need help with your full logo setup? Check out our Shopify logo requirements guide.
A favicon (short for "favorite icon") is that tiny little icon you see in browser tabs, bookmarks, and your browsing history. Usually 16x16 or 32x32 pixels, it's basically your store's calling card in the browser. When someone has 20 tabs open, your favicon is what helps them spot your store instantly.
Appears next to page title in browser tabs
Shows in saved bookmarks and home screen shortcuts
Displays in browser history and address bar
Think of it like your store's profile picture for the browser world. You know how profile photos on social media help you recognize people instantly? Same deal here. Without a favicon, your store just shows up as a boring blank icon. Not exactly memorable, right?
Here's a real scenario: Someone's shopping around with 20 tabs open (we've all been there). Your favicon is the difference between them finding your store in two seconds or giving up and going elsewhere. Small detail, huge impact.
Look, I know it's tiny. But this little icon punches way above its weight when it comes to brand recognition and making your store look legit. Honestly, it's one of the easiest wins you can get for looking professional.
Getting the size right is crucial. Too big and you're wasting bandwidth, too small and it'll look like garbage. Here's what Shopify actually wants (and what works best everywhere):
pixels (square)
This is your sweet spot. Works beautifully on all browsers and devices, and guess what? Shopify automatically resizes whatever you upload to this size anyway.
pixels (square)
The OG favicon size. Been around forever, still works everywhere. Your 32x32 icon scales down to this automatically when browsers need it smaller.
| Size | Use Case | Browser Support | Notes |
|---|---|---|---|
| 16x16 px | Browser tabs, bookmarks | 100% (all browsers) | Classic favicon size |
| 32x32 px | Retina displays, taskbar | 100% (all browsers) | Shopify's default size |
| 180x180 px | iOS home screen (Apple Touch) | iOS Safari | Optional for mobile |
| 192x192 px | Android home screen | Android Chrome | Optional for mobile |
Always start big and scale down. Create your icon at 512x512, then shrink it to 32x32. This keeps everything crisp. Never try to enlarge a small image—that's how you end up with blurry messes.
Sure, Shopify will auto-resize whatever you throw at it. But if you upload a perfectly optimized 32x32 PNG yourself? You get way more control over exactly how it looks. Worth the extra minute.
Good news: this takes literally 2 minutes. Let me walk you through it step by step so you don't waste time hunting through Shopify's settings:
Log into your Shopify admin panel at yourstore.myshopify.com/admin
From the left sidebar, click Online Store, then click Themes.
Find your current (active) theme and click the Customize button. This opens the Theme Editor.
In the Theme Editor, click the gear icon (Settings) in the left sidebar to access Theme Settings.
The gear icon is typically in the bottom left or top left of the sidebar.
Depending on your theme, look for either:
In the Favicon image section, click Select image. You have two options:
Search your uploaded images library and select an existing image with the checkbox.
Click "Add images", browse your computer for your favicon file (PNG, ICO, JPG), and upload it. Then select it with the checkbox.
If your theme has this option, toss in some descriptive alt text (like "YourStore logo icon"). Takes 5 seconds and helps with accessibility and SEO. Why not?
Hit that Save button in the top right. Done!
Your favicon should show up right away. If you don't see it, try a hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac). Browsers love caching these things.
Quick heads up: you need to be on the Basic plan or higher for custom favicons. Starter plan doesn't support them (yeah, I know, annoying).
On the Starter plan? You'll need to bump up to Basic ($39/month) if you want that custom favicon. Silver lining: you get a bunch of other features too.
Okay, here's where it gets tricky. You've got 32x32 pixels to work with. That's it. Every single pixel matters. But don't worry—there are some proven tricks to make your favicon pop even at this ridiculously small size:
Seriously, simple wins every time at this size. All those intricate details you love? They'll just turn into mush at 32x32. Stick with clean shapes, bold lines, or a single letter. That's your sweet spot.
Good Examples:
Your favicon needs to work on light mode AND dark mode. Pale colors on white backgrounds? Disaster. Go bold. Make it pop. And please, test it in dark mode before you publish—you'd be surprised how many favicons just vanish.
Contrast Tips:
Use the whole canvas! Don't put a tiny icon in the middle with huge empty borders. Stretch your design close to the edges. You've only got 32x32 pixels—make every one count.
Space Optimization:
This isn't the time to get creative with totally new colors or styles. Your favicon should scream "this is us!" the second someone sees it. Use your brand colors, simplify your logo down to its essence, or pick your most recognizable symbol.
Brand Connection:
Don't just upload and forget it. You need to actually check that this thing works everywhere. Different browsers, different devices, light and dark modes—they can all display your favicon differently. Here's your testing checklist:
The obvious one. Open your store and make sure that favicon is showing up next to the page title. Looks good? Great, but you're not done yet.
Test in these browsers:
Bookmark your store and check that the favicon displays in your bookmarks bar and bookmark manager.
Visit your store, then check your browser history to ensure the favicon appears next to your store's entry.
Enable dark mode on your browser and device to ensure your favicon has enough contrast to be visible on dark backgrounds.
On mobile, add your store to the home screen and verify the icon displays correctly.
iOS: Share → Add to Home Screen
Android: Menu → Add to Home screen
Here's the annoying part: browsers love caching favicons. Like, really love it. After uploading a new one, you might still see the old one until you force a refresh.
Hard Refresh:
Visit realfavicongenerator.net/favicon_checker to test your favicon across all browsers and platforms instantly.
Check the "Coverage" report in Google Search Console to ensure Google can access and display your favicon in search results.
Okay, so something's not working. Don't worry, you're not alone. These are the issues pretty much everyone runs into at some point:
You uploaded it, clicked save, but... nothing. Still seeing that boring default icon. Yep, this is the #1 complaint. Here's the fix:
It's showing up, but wow, it looks terrible. All blurry and pixelated. This usually means you made one of these mistakes:
Where the heck is this thing hiding? Sometimes Shopify themes bury this setting in weird places.
You updated it, but your browser is stubbornly showing the old one. Classic caching problem.
Works perfect in light mode, but vanishes completely when someone switches to dark mode. Oops.
Okay, you've got the basics down. Want to go pro? Here are some tools and tricks that'll take your favicon game to the next level:
This is the Swiss Army knife of favicon tools. Upload one image, get every size and format you could possibly need. Plus it has testing tools built in. Honestly amazing.
Need something quick? This is your tool. Turn text, images, or even emojis into favicons in seconds. No signup, no fuss, just results.
Not a designer? No problem. Canva's drag-and-drop interface makes it super easy to create something that looks professional. They've got templates too if you need inspiration.
For the design nerds out there. These give you total control over every pixel. Design at whatever size you want, export at exactly 32x32. Perfect for perfectionists.
Feeling ambitious? Shopify's default 32x32 works great for most people, but if you want your store to look absolutely perfect on mobile home screens and as a PWA, you can add these extra sizes:
| Size | Purpose | Implementation |
|---|---|---|
| 180x180 | iOS home screen (Apple Touch Icon) | Add via theme code (advanced) |
| 192x192 | Android home screen | Add via theme code (advanced) |
| 512x512 | PWA splash screens | Add via theme code (advanced) |
Fair warning: this requires messing with your theme code. Totally optional. The standard 32x32 is more than enough for 99% of stores.
Okay, favicon done! While you're on a roll with your store's visuals, why not tackle the rest of your images? AI can compress, resize, and optimize everything automatically. No more manual work.
Compress all product images to perfect sizes automatically
AI removes backgrounds from product photos instantly
Optimize your entire catalog in minutes, not hours
3-day free trial • No credit card required • Install in 60 seconds
