Did you know that a favicon can promote brand awareness for your Shopify store? That’s right. That tiny icon next to the web address on a browser tab can help imprint your brand logo and name in the minds of target users who visit your Shopify page. In turn, this can lead to new or repeat customers.
That said, would you like to know how to add favicon to Shopify? This guide is the perfect place to learn. Keep reading.
Table of Contents
What Is a Favicon on Shopify?
Favicon means “favorite” and “icon” combined. It is usually a small square image, pixel icon, or brand logo shown next to the title tag and web address in any browser tab.
For a Shopify favicon, you are allowed to use any image, but the store logo is often the best option. It acts as a strong branding message, also a cue for visitors to remember your store. Once added, your brand gets more visible to visitors on the address bar.
Visitors can use the favicon to identify your page. Alternatively, they may use it to locate your store’s website in their bookmarks list if they bookmark your site.
Why Do You Need a Favicon for Your Websites?
A favicon may seem like a tiny thing, but it can make or break your online store. Wondering why? Below are some reasons:
- To build credibility and trust
If your Shopify web pages don’t have a favicon, browsers will display a generic gray icon or the default blank document instead. In such a case, when a user is comparing your store and a competitor’s, they are likely to have little faith in yours. Hence, having a favicon can help improve credibility.
- Increases brand recognition
Favicons are like your website’s ID, helping visitors recognize your site among many tabs. Also, since images are easier to recall than texts, users may remember your store’s favicon before they read the page title. Logos can ingrain themselves into a customer’s mind quickly. Once this happens, it is easier for the client to remember your company and its name.
- Follow up visits
People are likely to revisit your Shopify store if they recognize your favicon in search results, bookmarks, or even browser history. For example, when a browser history has multiple entries with long names, people will likely click on a familiar icon.
- Save user’s time
If a visitor comes across your Shopify page in a hurry, he may decide to bookmark and check it out later. Due to the rush, he may only have time to notice your store’s favicon. This makes it easier to identify the page later from his bookmarks and saves him valuable time.
Best Shopify Favicon Size
16*16 or 32*32 pixels is the perfect Shopify favicon size. However, if the image you use is too large, Shopify will automatically scale it to 32*32 at upload time. So you shouldn’t worry too much about the image dimensions.
However, since favicons are displayed in tiny sizes, ensure the image or words are of high resolution.
Best Shopify Favicon Format
Shopify favicons support JPG, PNG, GIF and ICO image files. ICO is usually more popular, because it’s smaller and supported by all major browsers. PNGs are used more commonly for Android and iOS devices.
Other file formats may not show on internet explorer.
It also depends on your theme. Some may only accept .png or .ico files.
How to Add a Favicon to Shopify?
There are two ways to add a favicon on Shopify: directly via the theme settings, or by editing the code in the theme.liquid file. Let’s check each below.
Add a Favicon in the Theme Settings
You can access Shopify theme settings via a computer or a mobile phone. The steps differ in each case.
On Desktop
- Go to the Shopify Admin panel, and then click Online Store > Themes.
- Locate the theme you intend to edit and click Customize.
- Go to Theme Settings > Favicon.
- Under Favicon image, click Select image, then do one of the following:
- Click the Library tab to select a picture you already uploaded to your Shopify admin.
- Click the Library tab, then hit Upload to pick an image from your local storage.
- To add alt text to the favicon image, click Edit, then enter a brief description in the Edit image window and hit Save.
- Click Save to add the favicon.
On Mobile (For Android and iOS)
- Open the Shopify app and tap Store.
- Navigate to Sales Channels and tap Online Store > Manage themes.
- Locate the theme you intend to edit and tap Customize > Edit > Theme Settings > Favicon.
- Under Favicon image, press Select image, then do one of the following:
- Click the Library tab to select a picture you already uploaded to your Shopify admin.
- Click the Library tab, then hit Upload to pick an image from your local storage.
- To add alt text to the favicon image, click Edit, then enter a brief description in the Edit image window and hit Save.
- Click Save to add the favicon.
Tip:
Some Shopify themes allow you to add alt text to your favicon. Browsers then display the alt text when the favicon can’t load. Screen readers or voice assistants can also read out the alt text to describe the favicon image to visual users.
Add a Favicon in the theme.liquid File
This method is more complex than adding the favicon via settings. It requires editing your store’s code.
Before you start, ensure your image’s file name consists of the correct name and extension: i.e., my-favicon.ico or my-favicon.png. If it doesn’t, it will display incorrectly.
Steps:
- Go to your Shopify admin panel, then click Online Store > Themes.
- Locate the theme and click Customize.
- Press Theme Settings > Theme Actions > Edit Code.
- Scroll down, then click Assets > Add New Asset.
- Press choose a file, select the image file you want to use, then click Upload asset.
- Scroll up to the Layout folder, select it, then click theme.liquid. Code will be displayed on your screen.
- You need to find the </head> tag. To locate it quickly, press ctrl + F, type ‘</head>’ into the search bar, and hit enter.
- Paste the following code above the </head> tag, <link rel=”shortcut icon” href=”{{ ‘favicon.png’ | asset_url }}” type=”image/png” />. If your image has a .ico extension, replace favorite.png with favorite.ico.
- Click Save.
How to edit, change, update the favicon on my Shopify store?
The steps are the same as adding a favicon. Either navigate to your Shopify theme settings and replace the image, or change the asset and asset URL in the theme.liquid file.
Once you add or change your store’s favicon, refresh the page, then check if the favicon is displayed. If not, don’t panic, I have some solutions below to help you troubleshoot.
What to Do if My Favicon Isn’t Appearing on My Shopify Store?
If your favicon doesn’t show up, first check if it’s in the correct format (.png, .gif, or .ico), or of the right size (16*16 or 32*32 pixels). Then check if you named it correctly (favicon.png, favicon.ico, or favicon.gif).
You can also try refreshing the page just in case the favicon is cached by your browser. Refreshing the page can show an updated version, especially if you’ve just uploaded it.
If this doesn’t work, try clearing your browser’s cache and cookies. This often fixes the issue.
If you are still experiencing trouble, contact the Shopify support team for help.
How to Create a Favicon for My Shopify Store?
Since Shopify lacks a built-in favicon generator, you need to create your own. Here are 4 different ways to do that:
- Use a third party favicon generator – Enter “free favicon generators” on the Google search bar. Select one from the search results to generate your favicon in seconds.
- Use an image editor – This is a good option if you have image editing skills or have a designer onboard, with tools like Photoshop, Fireworks, Corel paint, or more.
- Use your company logo – This method is the easiest one. You don’t need to remake an icon from scratch but simply resize your existing logo to 16×16 or 32×32 pixels. Plus, using your logo as the favicon increases your brand recognition too!
- Use free, open-source software – These include tools like Luminar, Pixen, GIMP and Inkscape, among others. However, you need some coding skills to use them, which can be challenging.
Conclusion
Favicons on Shopify can convince a client to buy from your page or even come back to your site after the initial visit. After reading this guide, you now know how to add, edit, change, update a favicon in Shopify. Take your time to create and upload a unique and highly recognizable favicon!
