All posts
Learning how to change favicon on Shopify is a simple way to give your store a more professional and recognizable appearance. Your favicon helps customers identify your website when they have multiple browser tabs open, save your store as a bookmark, or return to your store later.
The good news is that you can usually change your Shopify favicon without coding. You just need to find the right setting in your theme editor, upload a suitable image, and check that the change appears on your live store.
What Is a Favicon?
A favicon is the small icon associated with a website. It typically appears in browser tabs, bookmarks, and other browser interfaces.
Boost Your Conversion Instantly with Nudgify: Turn your website visitors into customers with real-time Social Proof and FOMO Nudges. Get Started Now →
For a Shopify store, your favicon is a small but useful part of your visual branding. Using a recognizable icon can make your store easier to identify and help create a more consistent shopping experience.
Favicon vs. Shopify Logo
Your Shopify logo usually appears in prominent areas of your storefront, such as the header. Your favicon is much smaller and is mainly used to identify your website in a browser tab or bookmark.
You can use a simplified version of your logo as your favicon, but avoid including small text or details that will be difficult to see at a tiny size.
What to Prepare Before Changing Your Shopify Favicon
Before opening your theme editor, prepare an image that works well at a small size. A simple, clear design usually produces a better result than a detailed logo.
Recommended Favicon Size
Shopify recommends using a favicon image that is 16 × 16 pixels or 32 × 32 pixels. A square image is generally the best choice because favicons are displayed in a compact space.
Increase Trust & Sales with Social Proof
Boost trust, engagement, and conversions with Social Proof — tailored for any industry and easy to integrate. Seamlessly manage client access with our team portal.
For the best appearance, choose an icon with strong contrast and avoid thin lines, long text, or complicated details that may become difficult to recognize.
Choose a Suitable Image Format
A favicon should be saved in a web-friendly image format supported by Shopify. PNG is a practical choice for many store owners, especially when you want a clean image or a transparent background.
If you are creating a favicon from an existing logo, consider simplifying the design first. The goal is not to fit your entire logo into a tiny square, but to create an icon that remains recognizable.
Check Your Shopify Plan
Shopify’s official documentation states that adding a favicon is available on Basic and higher plans. The Starter plan does not support adding a favicon to an online store.
If you cannot find the favicon setting, check your plan and confirm that you are editing an online store theme.
How to Change Your Favicon on Shopify
You can change your Shopify favicon through the theme editor. The exact label may vary depending on your theme, but the process is generally straightforward.
Step 1: Open Your Shopify Admin
Log in to your Shopify account and open your store’s admin dashboard.
From the left-hand menu, go to Online Store > Themes.
Step 2: Open the Theme Editor
Find the theme you want to update. If you are working on your live theme, click Customize.
If you are editing a different theme, make sure you select the correct theme before making changes. Updating an unpublished theme will not automatically change the appearance of your live store.
Step 3: Open Theme Settings
Inside the theme editor, look for Theme settings. This is usually located in the sidebar or at the bottom of the theme editor navigation.
Depending on your theme, the favicon option may appear under Logo or as a separate Favicon setting.
Step 4: Upload Your Favicon
Find the Favicon image section and click Select image.
You can choose an existing image from your Shopify files or upload a new one from your computer. Select the image you prepared for your store.
Step 5: Add Alt Text if Available
If your theme provides an alt text field for the favicon, add a short, descriptive phrase that identifies the image or brand.
For example, if your store uses a distinctive brand mark, you could use alt text such as “Brand logo”. Keep it concise and avoid adding unnecessary keywords.
Step 6: Save Your Changes
Click Save in the theme editor to apply the change.
If you are working on an unpublished theme, remember that you may need to publish that theme before the favicon appears on your live storefront.
How to Change Your Shopify Favicon on Mobile
You can also manage your store’s theme settings through the Shopify mobile app. The available options and navigation may vary depending on your app version and theme.
To look for the favicon setting:
- Open the Shopify app.
- Go to Online Store.
- Tap Manage all themes.
- Select the theme you want to edit.
- Open Edit theme.
- Go to Theme settings.
- Look for Logo or Favicon.
- Select or upload your favicon image.
- Save your changes.
If the option is difficult to find in the mobile app, using the Shopify admin in a desktop browser may provide a more convenient editing experience.
How to Check If Your Shopify Favicon Is Working
After saving your changes, check your public storefront to confirm that the new favicon is visible.
Check the Live Storefront
Open your store’s public URL in a browser and look at the browser tab. The new favicon should appear next to your store’s page title.
Do not rely only on the theme editor preview. Shopify notes that favicons do not appear in the Theme Editor preview because that preview is part of the Shopify admin.
Test the Favicon in a Private Window
If you still see the old icon, open your store in a private or incognito window. This can help you determine whether your regular browser is displaying a cached version of the favicon.
You can also try refreshing the page or checking the store in another browser.
Check on Mobile
Open your store on a mobile browser to see how the favicon appears in a mobile browsing environment. A favicon that looks clear on a desktop tab should also be recognizable at smaller sizes.
Shopify Favicon Not Showing? Common Fixes
If you followed the steps for how to change favicon on Shopify but the new icon is not appearing, the issue may be related to browser caching, theme selection, or where you are checking the result.
The Old Favicon Is Still Showing
Browsers may continue displaying a previously cached favicon even after you update it in Shopify.
Try the following:
- Confirm that you clicked Save.
- Open the live storefront instead of the theme editor preview.
- Refresh the page.
- Check the store in a private or incognito window.
- Try another browser or device.
The Favicon Is Missing in the Theme Editor
This may be normal. Shopify states that favicons do not display in the Theme Editor preview because it is part of the Shopify admin.
Check the live storefront in a browser tab instead. That is the more reliable place to verify the favicon.
The Favicon Was Added to the Wrong Theme
If you have multiple themes in your Shopify admin, make sure you edited the theme currently published on your store.
A favicon added to a draft theme will not necessarily appear on your live website until that theme is published.
The Favicon Looks Blurry
A blurry favicon is often caused by an image that is too small, poorly scaled, or too detailed for its display size.
To improve its appearance, use a clean square image, choose a simple design, and avoid small text or fine details. Test the image at a small size before uploading it.
Why Is My Shopify Favicon Not Showing on Google?
Your Shopify favicon and the favicon displayed in Google search results are related, but they are not controlled in exactly the same way.
Google has its own favicon guidelines and does not guarantee that a favicon will appear in search results, even when a website meets those guidelines.
If your favicon is missing from Google, make sure your website can be crawled and that your favicon meets Google’s requirements. You may also need to wait for Google to recrawl and update the result.
Changing your favicon in Shopify does not guarantee an immediate update in Google search results.
Can You Change the Favicon on Shopify Checkout and Customer Accounts?
The favicon setting in your Shopify theme primarily applies to your online storefront. Checkout and Customer Accounts have separate branding considerations.
Shopify’s documentation states that favicons do not display on Checkout and Customer Accounts pages unless the store is on Shopify Plus.
For Shopify Plus merchants, advanced checkout and account branding options may be available through Shopify’s dedicated configuration and developer tools. These settings are separate from the standard theme editor favicon workflow.
Key Takeaways
- You can usually change your Shopify favicon through Online Store > Themes > Customize > Theme settings.
- Depending on your theme, the setting may be labeled Logo or Favicon.
- Shopify recommends a favicon image size of 16 × 16 pixels or 32 × 32 pixels.
- Use a simple, square, recognizable image for better visibility at small sizes.
- Always save your changes and check the live storefront rather than relying only on the theme editor preview.
- If the old favicon remains visible, check browser caching, theme selection, and whether the correct theme is published.
- A favicon update in Shopify does not guarantee an immediate change in Google search results.
People Also Ask
Where do I change my favicon in Shopify?
You can change your Shopify favicon by going to Online Store > Themes > Customize > Theme settings. Look for the Logo or Favicon setting, depending on your theme, then upload or select your image and save the changes.
What size should a Shopify favicon be?
Shopify recommends a favicon image size of 16 × 16 pixels or 32 × 32 pixels. A square image with a simple, high-contrast design is generally best for a favicon.
Why is my Shopify favicon not showing?
Your Shopify favicon may not be showing because of browser caching, an unsaved change, or because you are viewing the Theme Editor instead of the live storefront. Check the published theme, save your changes, and test the store in a private browser window.
Can I change my Shopify favicon without coding?
Yes. Shopify provides a favicon setting in the theme editor, allowing most eligible stores to upload or select a favicon without editing theme code.
Does Shopify Starter support custom favicons?
According to Shopify’s official documentation, the Starter plan does not support adding a favicon to an online store. Favicon customization is available on Basic and higher plans.
Why is my favicon not showing on Google?
Google has separate favicon requirements and does not guarantee that a favicon will appear in search results. Make sure your site can be crawled and that your favicon meets Google’s guidelines, then allow time for Google to recrawl your website.
Related Articles
