Facebook Community
Change Log
Help Center
How to Add or Change Favicon on Shopify (8 Easy Steps)
People often keep dozens of tabs open while browsing. In such cases, the small icon next to the website’s title helps users quickly identify pages they've visited.
This small icon, called a favicon, is a square image that plays a significant role in reinforcing brand identity.
If you are an entrepreneur looking to add or change a favicon on your Shopify store, you are at the right place. In this blog post, we will walk you through 8 easy steps to add or change favicon Shopify.
How Can You Benefit from Adding a Favicon to Your Shopify Store?
A favicon, short for "favorite icon", is a small image that appears in the browser tab or bookmark bar next to your website’s title. It usually mirrors or partially reflects your brand’s logo, helping to enhance brand recognition.
Favicons are small square images displayed in the tab of a browser web or bookmark bar next to the website’s title.
The ideal favicon size on Shopify is 16x16 or 32x32 pixels. Small as it may seem, a favicon can do wonders for your online store:
- It enhances your brand identity, making your Shopify store more memorable and easily identifiable.
- It gives your online store a professional and polished look, building trust with visitors and customers.
- It provides a visual cue for visitors to quickly locate your Shopify store among multiple tabs opened in their web browsers.
Learn more: 12 Brand Building Tips Shopify Store Owners Need to Know
Guidelines for creating a favicon for your website
When designing a favicon for your website, keep these best practices in mind:
Select the Right Size
The recommended and most widely supported size for a favicon is 16x16 pixels. While other sizes like 32x32 or 48x48 pixels can be used, the 16x16 dimension is the safest option because it is compatible with all major web browsers for use in the address bar, tabs, and bookmarks.
Choose a Compatible File Format
The file format you use is crucial. The most common and effective formats are PNG and ICO. PNG files are excellent because they use lossless compression and support transparency, ensuring your image quality remains high when resized. ICO files, which are used by Microsoft Windows, can store multiple image sizes and color depths, making them highly scalable. You should generally avoid formats like JPEG because they lose image data when scaled down. While SVG is a fast-loading and infinitely scalable option, it has limited browser support.
Evaluate Animated Favicons
Animated favicons, created with GIFs or Javascript, can be eye-catching but have compatibility issues. You must test them across various browsers, as they might not display correctly on all of them.
Popular Favicon Generators?
If you want to create a custom favicon that matches your brand, you can use one of these popular online tools:
-
Favicon.io: This tool allows you to create favicons from an image, URL, or text and convert them into various formats. You then download the files, place them in your website's root directory, and add the necessary code to your HTML.
-
RealFaviconGenerator: This is an interactive tool that gives you control over how your master image is used to create the favicon.
-
Favicon Generator: This platform-specific tool lets you see how your favicon will look on different devices and browsers.
-
Favicon.ico & App Icon Generator (Dan’s Tools): With this tool, you can upload an existing image to convert it to an ICO file or choose from a gallery of pre-designed icons.
How to Add or Change a Favicon on Shopify?
Step 1: Sign in to Your Shopify Account
First things first, go to Shopify website and log in to your Shopify account using your email address and password.
Learn more: Shopify Tutorial: Set Up Your Store from Scratch to Finish (2025)
Step 2: Go to the "Themes" section
On Shopify, a favicon is included in all themes as a straightforward option.
So, from your Shopify admin, head over to Online Store > Themes.
Step 3: Click "Customize"
Once you’re in the Themes section, hit the Customize button.
Step 4: Open the Theme Settings
Next, click on the icon referring to Theme Settings.
Step 5: Click on "Logo"
Depending on your current theme, the Favicon section will be displayed differently. Here is our tutorial on the Dawn theme.
In the Theme settings page, click Logo.
Step 6: Select Your Favicon Image
On the Logo section, you can add or change either your logo or your favicon.
In the Favicon image area, do one of the following:
- Click Select image to select an image you have already uploaded to your Shopify admin or to upload an image from your computer by pressing Add images.
- Click Explore free images to select an image from Shopify’s library of free favicon images.
Here, you can also change a selected favicon by clicking on the Change button.
Step 7: Add Alt Text to Your Favicon
Once a favicon is chosen, add alt text to describe your image. Alt text will be displayed when an image can’t load.
- Click Edit.
- Enter a brief description of your favicon image in the Alt text field.
- Hit Save.
Learn more: How to Write Shopify Product Descriptions That Inspire Purchase
Step 8: Save Your Favicon
Remember to click Save to save your changes.
Now the selected favicon is displayed on your browser tab next to your website’s title.
Boost Your Brand Recognition With A Favicon Shopify!
Whether you are starting out with Shopify or are a seasoned eCommerce expert, having a well-designed favicon on your Shopify store brings you one step closer to creating a strong and professional brand identity.
But don’t stop there and settle for a run-of-the-mill online store when you can take your business to a higher level with GemPages, our powerful and user-friendly page builder.
Let GemPages be your right-hand person to elevate your storefront and build pages that actually sell in no time.
FAQs about Shopify Favicon
