How to Change Favicon on Shopify in 2025: Step-by-Step Guide
Learning how to change favicon on Shopify is an easy way to make your store look polished and on-brand. A favicon is the small icon that appears on browser tabs, bookmarks, and search results, and updating it helps customers recognize your store at a glance.
In this guide, you’ll learn:
- What a favicon is and why it matters for your Shopify store
- How to change your favicon on Shopify (desktop & mobile)
- How to edit your favicon through theme code for more control
- Troubleshooting tips if your favicon doesn’t show or update
This step-by-step tutorial is simple to follow and works for every Shopify theme, helping your store look professional on all browsers and devices.
What Is a Favicon and Why Does It Matter?
What is a favicon?
A favicon is a small square image that represents your Shopify store. It appears in browser tabs, bookmarks, and search results, helping visitors identify your site instantly.
Most brands use a simplified version of their logo or a clear symbol that fits within a tiny space, usually 32×32 pixels.
Benefits of using a favicon for your Shopify store
- Reinforces your brand identity across all browsers and devices
- Builds trust and professionalism by completing your store’s look
- Improves visibility in browser tabs and mobile views
- Helps customers recognize your store when multiple tabs are open
- Creates a consistent experience that strengthens your brand presence
A favicon might be small, but it has a big impact on how customers see your store. It completes your branding, builds recognition, and gives your Shopify site a more professional appearance across browsers and devices.
How to Change Favicon on Shopify
Step 1. Open the Theme Editor
From your Shopify admin, go to Online Store → Themes (1).
Find your current theme and click Customize (2) to open the theme editor.
Step 2. Access theme settings
Inside the editor, click the gear icon in the left-hand menu to open Theme settings.
Step 3. Go to the favicon section
Select Logo or Favicon, depending on your theme layout. If your theme groups the favicon under the Logo section (as shown in the image), scroll to find the Favicon field there before selecting your file.
Step 4. Select a new image
Click Select image under the Favicon option. You can upload a new image from your computer or choose one from your Shopify file library.
If your theme uses metafields such as Brand or Logo, scroll to find the Favicon setting within that section. You may also see related options like Default logo, Square logo, or Cover image.
For the best result, use a 32×32 pixel image in PNG or ICO format.
Step 5. Save your changes
Click Done, then click Save to apply your new favicon. If it does not appear immediately, clear your browser cache or open your store in an incognito window.
If you’re updating from a mobile device, follow the steps below for iPhone or Android on how to add favicon on Shopify.
| On iPhone | On Android |
| 1. Open the Shopify app → tap Online Store → Manage all themes. 2. Tap Customize on your active theme. 3. Tap … → Theme settings → Logo or Favicon. 4. Tap Select image → upload or choose one. 5. Tap Done → Save. 6. (Optional) Add alt text via Edit → Alt text field → Save. | 1. Open the Shopify app → tap Online Store → Manage all themes. 2. Tap Customize on your active theme. 3. Tap … → Theme settings → Logo or Favicon. 4. Tap Select image → upload or choose from your device. 5. Tap Done → ✓ to Save. 6. (Optional) Add alt text as above. |
Most store owners can update their favicon easily through the theme settings, whether on desktop or mobile. If your theme doesn’t include a favicon option or you prefer more control over how it appears, you can also change it directly in your theme code.
Advanced Option: How to Add Favicon on Shopify via Code
If your Shopify theme doesn’t include a favicon upload option or you want more control over how it appears, you can add or replace it manually in the theme code. This method is useful for developers or store owners who are comfortable working with HTML and Liquid files.
First, let’s make sure the favicon file (for example, favicon.png) has been uploaded to your Shopify Files or theme assets before linking it.
Then, here are the stepson how to add a favicon to Shopify using code:
- Go to Online Store → Themes in your Shopify admin.
- Click the three dots (⋯) next to your active theme and select Edit code.
- In the Layout folder, open the theme.liquid file.
- Inside the <head> section, add or update the following line:
<link rel="icon" href="{{ 'favicon.png' | asset_url }}" type="image/png">- Click Save to apply your changes.
Editing the favicon through code gives you more flexibility, such as adding different icon sizes or formats for various devices. However, for most store owners, using the built-in theme settings is the easier and safer option.
And that’s how to change favicon on Shopify via code.
Troubleshooting: What If Favicon Not Updating on Shopify?
If you have changed your favicon but still see the old one, the problem is usually small and easy to fix. The issues below are the most common reasons why your new favicon might not appear.
1. Browser caching delays
Browsers often store favicons to help pages load faster. When you upload a new icon, your browser may continue showing the old version from its cache. To fix this, you should clear your browser cache or open your store in an incognito window to check the updated icon.
2. Image quality issues
A favicon is displayed at a very small size, so detailed graphics or text may look blurry. You should choose a simple, high-contrast image that remains clear and recognizable at 32×32 pixels.
Related article: Shopify Image Sizes | Complete Guide with Examples
3. Wrong file format
If your favicon is not appearing, your image format might not be supported. Shopify accepts PNG, JPG, and ICO files, but PNG is usually the best choice because it supports transparency and works well on all browsers.
4. Changes not saved
Sometimes the favicon does not update because the changes were not saved. After you upload the new image in the theme editor, make sure you click Save so the update appears on your live store.
5. Mobile sync delays
When you update the favicon from the Shopify mobile app, the new icon may take a few minutes to sync across all devices. You can refresh your store or reopen it in a new browser tab to confirm the change.
If you still do not see the new favicon, let’s try uploading the file again or check your theme’s settings. In rare cases, older themes may require manual code editing to display the new icon properly.
How to Change Favicon on Shopify: FAQs
How to change my favicon on Shopify?
To change your favicon on Shopify, go to Online Store → Themes in your Shopify admin. Click Customize on your active theme, open Theme settings, and select Logo or Favicon. Under the Favicon section, click Select image to upload a new icon or choose one from your Shopify file library. Click Done and then Save to apply your changes.
What size should my Shopify favicon be?
The ideal favicon size for Shopify is 32×32 pixels. Shopify automatically resizes larger images, but using this exact dimension helps maintain clarity and prevents blurring on different devices and browsers.
Can I add a favicon on the Shopify Starter plan?
No. The option to add or change a favicon is only available on the Basic plan or higher. If you are using the Starter plan, you will need to upgrade to access this feature.
Does a favicon affect SEO performance?
A favicon does not directly influence search rankings. However, it improves your brand visibility and helps users recognize your store in browser tabs and search results, which can increase trust and click-through rates.
Why is my favicon not changing on Shopify?
If your favicon does not appear after saving, your browser may still be displaying the cached version. Let’s try clearing your cache or viewing your store in incognito mode. If the issue continues, double-check that your file format and dimensions meet Shopify’s requirements.
Final Words
A favicon does more than fill a tiny space in a browser tab. It represents your brand wherever your store appears and helps visitors remember who you are. When it’s clear, consistent, and sized correctly, it adds a finishing touch that makes your Shopify store feel complete and credible. Small details like this show that your brand cares about presentation and customer trust.
Give your Shopify store a complete, professional look!
At LitOS, we specialize in Shopify store development – from theme setup and speed optimization to performance tracking and checkout improvements. If you want a store that runs smoothly, loads fast, and delivers a better shopping experience, our team is ready to help.
CONTACT US
