How to Add a Favicon to Shopify

Adding a favicon to Shopify is a straightforward theme customization. You can upload an image from your Shopify admin without editing your theme code in most Shopify themes. In this tutorial, you’ll learn how to prepare a favicon, add it to your Shopify store, replace or remove it, verify that it is working, and troubleshoot cases where the favicon does not appear. You’ll also learn what to do if your theme places the favicon setting in a different location.

Before you start, have a square favicon image ready. Shopify recommends a favicon size of 32 × 32 pixels, although a 16 × 16 pixel image is also listed as an ideal favicon size in Shopify's documentation. Images larger than 32 × 32 pixels can be reduced to 32 × 32 pixels when uploaded.

How Do You Add a Favicon to Shopify?

Shopify provides a favicon setting through the theme editor for eligible stores. The exact location of the setting can vary by theme version. Shopify's current instructions place it under Theme settings, where it may appear as Favicon or under Logo.

1. Log in to Shopify: Sign in to your Shopify admin. You need access to the store whose favicon you want to change.
2. Open Online Store > Themes: From the Shopify admin, go to Online Store > Themes. Locate the theme that you want to modify.
3. Open the theme editor: Click Customize (or Edit theme) next to the theme you want to customize. The important point is to open the theme editor for the theme you want to change.
4. Open Theme settings: Inside the theme editor, click the Theme settings icon (represented by a gear icon on the left panel).
5. Find the favicon setting: Depending on your theme version, click Logo or Favicon. Shopify specifically notes that the location can differ depending on the theme version. Do not assume that every Shopify theme will display an identically named setting in the same place.
6. Select your favicon image: In the Favicon image section, click Select image. You can then either select an image that is already uploaded to your Shopify admin, or click Add images and upload an image from your computer. Select the favicon you prepared.
7. Click Done: After selecting the image, click Done. Shopify will return you to the favicon settings.
8. Add alt text when available: Some themes let you add alt text to the favicon. To do this, click Edit in the Favicon image section and enter a brief description of the image. Shopify notes that some themes provide this option. A descriptive example would be: Brand initials in white on a black background.
9. Save your changes: Click Save at the top right. This applies the favicon to the theme you are editing.
10. Check the live store: Open your published Shopify store in a normal browser window. Look at the browser tab and check whether your new favicon appears beside the page title. Do not rely solely on the preview inside the Shopify theme editor. Shopify notes that favicons do not display when viewing a theme through the Theme Editor because the editor is part of Shopify admin rather than the live storefront.

Where Is the Favicon Setting in Shopify?

In current Shopify instructions, the favicon setting is accessed through the theme editor:

Shopify admin → Online Store → Themes → Edit theme/Customize → Theme settings

From there, the setting can appear as Favicon or under Logo, depending on the theme version. This variation is important because an older tutorial may tell you to click Favicon immediately, while your theme may place the same option inside Logo. If you cannot find the setting, check the complete Theme settings panel rather than looking only for a specific label.

Shopify also requires themes submitted to its Theme Store to have a favicon setting, which means themes designed for Shopify's ecosystem are expected to provide support for this customization.

What If You Cannot Find a Favicon Setting?

First, confirm that you are editing the correct theme. Then check:

• Go to Online Store > Themes.
• Open the theme you actually want to publish.
• Open Theme settings.
• Check both Favicon and Logo.
• Look through the complete theme settings panel. Some themes organize their settings differently.

If your theme genuinely does not expose a favicon setting, theme code may provide an alternative. Shopify themes can expose global settings through settings_schema.json, and Shopify's developer documentation shows that favicon settings can be rendered through the theme's global settings object. Code editing should not be the first option when the theme already provides a favicon setting.

What Size Should a Shopify Favicon Be?

Shopify recommends 32 × 32 pixels for a favicon. Its help documentation also identifies 16 × 16 pixels as an ideal favicon size and explains that larger images can be reduced to 32 × 32 pixels when uploaded.

The practical priority is not simply choosing a number. The image must remain recognizable after it is displayed at favicon size. For example, a 32 × 32 pixel icon containing an entire company name may technically fit but still be impossible to read. A simple symbol with strong contrast can work much better.

How Do You Create a Favicon for Shopify?

You have several options depending on what brand assets you already have.

Create a favicon from your logo

Start with the most recognizable part of your logo. A horizontal logo containing a symbol and a long company name should usually be simplified rather than reduced proportionally until the text becomes unreadable. Use the symbol alone or combine one or two recognizable initials.

Create a favicon from initials

If your company has no distinct icon, create a simple favicon using one or two letters. For example, NS could represent a brand called North Star. Use a clear typeface, sufficient spacing, and strong contrast.

Convert an existing PNG into a favicon

If you already have a square PNG image, you can convert it into favicon-ready artwork before uploading it. A tool such as PNGtoFavicon.com can convert a PNG into a favicon, which is useful when you already have a brand image but need a dedicated favicon version.

After conversion, inspect the resulting icon at a small size before uploading it to Shopify.

Create a favicon specifically for small-screen display

Do not simply shrink your full-size logo without checking the result. Remove unnecessary elements, increase contrast when needed, and make sure the important part of the icon remains visible. The favicon is successful when a visitor can identify your brand from the tiny icon without needing to zoom in.

How Do You Check if Your Shopify Favicon Is Working?

After saving the favicon, verify it on the live storefront.

• Check the browser tab: Open the published store and look beside the page title in your browser tab. Shopify identifies the browser tab as one of the main places where a favicon appears.
• Check browser history: Visit another page, return to your store, and check the browser's history entries. Shopify lists browser history as another location where a favicon can appear.
• Check a bookmark: Bookmark the store and check whether the favicon appears beside the bookmark. Shopify specifically identifies bookmarked stores as another location where the favicon can display.
• Test a private or incognito window: If the old favicon is still visible in your regular browser, open a private or incognito window and visit the live store. This helps separate a browser-cache issue from a Shopify configuration problem.
• Test another browser: Open the store in another desktop browser. If the new icon appears in one browser but not another, browser caching or browser-specific behavior is a more likely explanation than a failed Shopify upload.
• Check mobile behavior: Do not assume that desktop and mobile browsers will display the favicon identically. More importantly, distinguish the live storefront from Shopify's admin interfaces. Shopify states that favicons do not appear in the Theme Editor preview itself.

Why Is My Shopify Favicon Not Showing?

Several different problems can produce the same symptom.

How Do You Fix a Shopify Favicon That Is Not Updating?

Work through these checks in order:

1. Open Online Store > Themes.
2. Confirm that you are editing the correct theme.
3. Open Theme settings.
4. Check the Favicon or Logo setting.
5. Confirm that the correct image is selected.
6. Click Save.
7. Open the published storefront, not the Theme Editor.
8. Test the site in a private or incognito browser window.
9. Test another browser.
10. Check the favicon again in the browser tab.

This sequence helps identify whether the problem comes from Shopify settings, the selected theme, or browser caching.

How Do You Change or Replace a Shopify Favicon?

Replacing a favicon uses the same theme settings as the initial upload.

• Log in to your Shopify admin.
• Go to Online Store > Themes.
• Find the theme you want to update.
• Click Edit theme/Customize.
• Open Theme settings.
• Click Logo or Favicon, depending on your theme.
• In the Favicon image section, click Select image.
• Choose the replacement favicon or upload a new image.
• Click Done.
• Click Save.
• Open the live store and verify the new icon.

Shopify's current documentation confirms this workflow and the theme-dependent Logo/Favicon variation.

How Do You Remove a Shopify Favicon?

The removal process depends on the controls exposed by your theme.

Open:

Online Store → Themes → Edit theme/Customize → Theme settings

Then open the Favicon or Logo area and look for the control associated with the currently selected favicon image.

If your theme provides a remove or clear option, use it and save the theme. Do not add custom code simply to remove a favicon when your theme already provides a setting for managing it.

Can You Add a Shopify Favicon With Custom Code?

Yes, but most stores should use the built-in theme setting first.

Shopify's theme architecture supports global settings through settings_schema.json. A theme can define a favicon image setting and access its value through the Liquid settings object. Shopify's developer documentation includes an example that renders a PNG favicon from settings.favicon.

For a custom theme, code can therefore be part of the implementation. For a normal Shopify store, however, editing Liquid just to add a favicon is unnecessary when the theme already provides the setting.

When Should You Use Theme Settings Instead of Code?

Use the built-in theme setting when it is available. It is easier to manage, less likely to introduce theme errors, and can be changed later without modifying Liquid files.

What Should You Check Before Editing Theme Code?

If you must edit code, first identify the published theme, the theme's favicon implementation, the relevant layout file, whether a global favicon setting already exists, and whether the theme is updated or maintained by another developer. Do not paste favicon code into a random theme file without understanding how the theme handles global settings.

Common Shopify Favicon Mistakes to Avoid

• Using your entire logo: A long logo can become unreadable when reduced to favicon dimensions.
• Using tiny text: One or two initials may work. A full slogan usually will not.
• Using a complicated image: A simple brand mark is easier to recognize than a detailed illustration.
• Using a non-square image: Start with square artwork so the favicon does not rely on aggressive cropping or scaling.
• Using a low-quality source: A blurry source image will produce a poor favicon even after resizing.
• Forgetting to save: Selecting an image is not enough. Save the theme changes.
• Checking only the Theme Editor: The favicon may not appear in Shopify's Theme Editor preview. Test the published storefront instead.
• Checking only one browser: A stale favicon in one browser does not automatically mean the Shopify configuration is wrong.
• Testing an unpublished theme: You can customize a theme that is not currently live, but that does not change the favicon visitors see on your published storefront.
• Editing code unnecessarily: If the theme already has a favicon setting, use it instead of changing Liquid.

Shopify Favicon FAQs

How to Create a Favicon Before Uploading It to Shopify

If you do not already have a favicon, use this simple workflow:

1. Start with your logo, brand symbol, or initials.
2. Create a square version of the design.
3. Remove details that will disappear at small sizes.
4. Use strong contrast between the icon and background.
5. Prepare the image around Shopify's recommended 32 × 32 pixel size or use a clean larger source that Shopify can reduce.
6. Convert an existing PNG with a favicon tool when necessary.
7. Upload the finished image through Theme settings.
8. Save the theme.
9. Test the favicon on the live storefront.

Conclusion

Adding a favicon to Shopify is primarily a theme-editor task. Open Online Store > Themes, edit the relevant theme, open Theme settings, find Favicon or Logo, select your image, and save the theme. Use a simple square icon that remains recognizable at a very small size. When the new favicon does not appear immediately, check the published store in a private window or another browser before changing the Shopify settings again. Browser caching can make a successfully updated favicon appear unchanged.