A favicon on Shopify is the small icon that appears in browser tabs, bookmarks, and search results next to your store’s name. It’s typically a tiny version of your logo, sized at 16×16 pixels, and it helps customers recognize your store when they have multiple tabs open. Every Shopify theme includes a built-in setting to upload one, so you don’t need to touch any code.
Where Your Favicon Shows Up
Once you upload a favicon, it appears in several places your customers interact with every day. The most visible spot is the browser tab: when someone has your store open alongside other websites, your favicon sits to the left of your page title. It also appears in bookmark lists if a customer saves your site, and some search engines display favicons in their results pages next to your URL.
Without a custom favicon, Shopify displays a generic icon (or nothing at all), which makes your store harder to spot in a crowded tab bar and can look unfinished to shoppers.
Image Format and Size
Shopify accepts common image formats for favicons, but .ico files at 16×16 pixels are the most universally compatible across browsers and devices. PNG files also work well and support transparency, which is useful if you want your icon to blend seamlessly with different browser and device backgrounds rather than sitting inside a colored square.
Keep the file size small. Favicons are tiny by nature, and a lightweight file loads instantly without adding to your page speed. If you’re starting from a larger logo file, resize it down and check that the details are still legible at that miniature scale before uploading.
How to Add a Favicon in Shopify
The upload process takes about a minute and lives inside your theme settings:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Edit theme.
- Click the gear icon to open Theme settings.
- Depending on your theme version, click Logo or Favicon.
- In the Favicon image section, click Select image, then either choose an image already in your Shopify library or upload one from your computer.
- Click Done, then Save.
If you’re using the Shopify mobile app, the path is similar. Tap the menu icon, go to Online Store under Sales channels, tap Manage all themes, then open the theme editor and navigate to Theme settings. From there, the Favicon image section works the same way.
Design Tips for a Readable Favicon
A favicon is far smaller than your logo, so what looks great at full size can turn into an unreadable smudge at 16 pixels. The best favicons use a simplified element of your brand rather than a shrunken-down version of a detailed logo. If your logo is a wordmark (just text), consider pulling out the first letter or a distinctive symbol instead.
Avoid fine lines, small text, and intricate detail. Bold, simple shapes with strong color contrast hold up much better at tiny sizes. A transparent background is generally the best choice because it looks clean across different browsers and operating systems. A favicon with a colored background square can look dated and may clash with the browser’s own interface colors.
Make sure the icon aligns with the rest of your branding. A first-time visitor glancing at their browser tab should get a visual cue that connects back to your store’s look and feel.
Fixing a Favicon That Won’t Update
If you’ve uploaded a new favicon but still see the old one (or no icon at all), the most common cause is browser caching. Your browser stores a copy of the old favicon locally and keeps displaying it even after you’ve made changes on Shopify’s end. Try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear your browser cache entirely. Testing in an incognito or private window is a quick way to confirm the new favicon is actually live.
If a hard refresh doesn’t solve it, go back into your Shopify admin under Themes and confirm the new file is actually showing in the Favicon image section. Occasionally the upload appears to complete but doesn’t fully save. Re-uploading and clicking Save again usually fixes it.
Another option is to republish your active theme. Go to Online Store, then Themes, and use the Actions menu to publish the theme again. This can help clear any server-side caching on Shopify’s end. Even after all of these steps, favicon changes sometimes take a few hours to propagate fully, so give it a bit of time before troubleshooting further.