How To Add a Favicon to Shopify (& Tips)
Though adding a favicon might seem like a small detail, overlooking it can break the professional look your brand deserves. So, what is a favicon and how to add a favicon to Shopify properly?
Well, don’t worry! In this quick guide, our eCommerce gurus will walk you through the entire process (hint: it’s easy-peasy). Bonus: We will give you some best practices and suggest top Shopify apps to enhance your favicon further.
Let’s dive in!
Contents
1. What is favicon image on Shopify & its benefits?
A favicon is a small graphic that appears next to your site’s title in browser tabs, bookmarks, address bars, and search engine result pages (SERPs).
Though favicons are small, they have big impacts on user experience, website conversion, your branding image, and everything in between. To be more particular, adding a proper favicon to your web store can help:
- Enhance user’s on-site experience: A favicon helps customers quickly locate your site among their countless open tabs.
- Boost customer trust: Unlike the default globe icon, a consistent favicon signals that your website is well-maintained and trustworthy.
- Keep your brand top-of-mind: A recognizable favicon reminds your customers of your brand every time they open a browser tab or bookmark that displays your unique logo.
To that end, learning how to add favicon to Shopify should be at the top of your website customization checklist, which we will show you next.
2. How to add a favicon to Shopify [with troubleshooting]
2.1. Step-by-step guide
The process of how to add favicon on Shopify involves two main steps– preparing your favicon and adding it to your online store.
Step 1: Prepare your favicon
First, you will need to prepare a favicon with the right 1:1 ratio. Ideally, your favicon dimensions should be 16×16 pixels or 32×32 pixels. If you upload an image larger than these sizes, Shopify will automatically downsize it to 32×32 pixels to ensure optimal display across browsers.
If you have a logo without text in place, you can crop it to meet the 1:1 ratio. Otherwise, depending on your use case, you can make use of these free favicon generators to quickly create your tab icon:
- Favicon.io: Generate favicons from text or images
- RealFaviconGenerator: Create and test favicons for multiple devices
- X Icon Generator: Convert images to favicons with customizable options
For example, here’s a sample favicon we created to resemble eComStart’s favicon using the text-to-favicon function of Favicon.io:
Step 2: Add favicon to your Shopify website
Now that you have a properly sized favicon, let’s learn how to add favicon Shopify next. Just follow the steps below and you’ll be fine:
1. Head to Online Store tab > Choose Themes > Navigate to your theme and click Customize.
2. Afterward, you will be brought to the Shopify theme editor. Herein, choose Theme settings (the gear icon) > Select Logo > As the logo tab collapses, navigate to the Favicon section.
3. Then, choose Add image and upload the favicon you created in step 1 > Click Done.
4. Click Save and double-check your favicon to make sure it appears properly, as it should.
And if you want to update your favicon, simply hover and click Change on your current favicon and select the new favicon you have.
The process of how to add favicon to your Shopify website is pretty simple like that.
If you want to save time, you can consider premade Shopify stores to launch your Shopify store on a high-converting layout, with pre-populated products and digital marketing assets (including favicon setup).
2.2. Shopify favicon not showing
In case your favicon isn’t displaying on Shopify even after following all the steps above, here are some troubleshooting steps:
1. Caching: Your browser or Shopify might be caching an older version. For example, to clear your Google Chrome’s cache, go to Settings > Privacy and security > Delete browsing data.
2. File placement: The favicon link must be placed within the <head></head> section of your theme’s code, not in the <header></header> section, as browsers look for it there to load the icon.
To verify, navigate to Online Store > Themes > Actions > Edit Code > theme.liquid in your Shopify admin. Search for a code snippet like in the screenshot below:
If this snippet is missing or incorrectly placed, copy and paste it into the <head> section.
3. Theme settings: Check your theme’s documentation or settings, as some themes may have special instructions for favicon integration.
3. Best practices on how to add favicon to Shopify store
Now that you know how to add a favicon to Shopify, here are some best practices to keep in mind to ensure that this small graphic can work to your advantage:
3.1. Choose the right format
For a high-resolution display of your favicon, we’d recommend the PNG format for its amazing compression, ensuring that every detail of your design remains crisp even at small sizes. On the other hand, ICO has traditionally been used for favicons due to its native support in many browsers, though it can be less flexible in handling transparency compared to PNG.
Other formats, such as JPEG, are generally not advised because they lack the ability to support transparency and may exhibit compression artifacts that degrade image quality when scaled down to 16×16 or 32×32 pixels.
3.2. Make it simple and reflect your brand
Given the tiny canvas that a favicon offers, keeping the design simple and reflective of your brand is essential.
For that reason, you should use a scaled-down version of your primary logo, distilled to its most essential visual elements (e.g., icon, letter, or color block) that can be easily recognized at small dimensions.
3.3. Opt for a transparent background
Choosing a transparent background for your favicon is a smart decision for several reasons. Transparency ensures that your favicon seamlessly integrates with various browser themes, whether your potential customers are using a light mode or dark mode environment.
3.4. Test your favicon thoroughly
Favicons can render differently depending on the platform—a design that looks perfect on Chrome might appear distorted on Safari or mobile browsers. So, before finalizing the favicon upload on your Shopify store, make sure you do thorough testing across different browsers and devices.
3.5. Provide alt text for your favicon
Alt-text serves as a textual description that can assist screen readers in conveying the essence of your graphic to users with visual impairments. Plus, descriptive file names and alt attributes can contribute to the overall SEO of your website by providing context about the image to search engines, even if favicons are not directly indexed in the same way as other content.
Therefore, while favicons are primarily a visual element, remember to provide alternative text (alt text) to enhance your website’s accessibility and SEO.
If you want more tips and tricks on preparing and optimizing your Shopify store for success, read our blog on how to launch a Shopify store.
4. Top 3 favicon Shopify apps to spice up your favicon
If you want to upgrade your favicon into something fresh and unique, here are the best Shopify favicon apps that can help you with:
1. Favi: Favicon Tab Animation
Ratings: 4.9/5.0 ⭐ (61 reviews)
Pricing: $0.99/month | 7-day free trial
Favi: Favicon Tab Animation is an app that can help you bring your customers to the right track. Specifically, when they switch your Shopify store’s tab to another one, the app will replace the browser tab title of your store with your favicon animation and custom text instead of a static standard favicon.
If you don’t know how to configure these apps or have trouble choosing a nice favicon, don’t hesitate to contact our Shopify setup services for consultation!
2. DONGO: Exit Tab Icon Animation
Ratings: 4.8/5.0 ⭐ (8 reviews)
Pricing: Free
Like Favi, DONGO: Exit Tab Icon Animation is another favicon app that empowers you to animate your Shopify store’s favicon as soon as visitors switch tabs. The app supports various animation effects such as blinking, typing, or scrolling.
Compared to ordinary favicons, adding animated favicons will help customers locate your tab more easily and come back to make a purchase.
3. FaviCart Abandonment Protector
Ratings: 4.1/5.0 ⭐ (37 reviews)
Pricing: Free
FaviCart Abandonment Protector is another favicon Shopify tool that helps decrease lost sales by turning the browser’s title bar into a smart reminder tool. It automatically animates both text and favicon when customers navigate away, gently urging them to return and complete their purchase.
5. Final thoughts
As the default globe tab icon appears unprofessional and untrustworthy among your shoppers, learning how to add a favicon to Shopify the right way is a must, not a plus.
If you find this blog helpful, you can read more eCommerce guides, tips, and tricks like it at eComStart, where eComStart’s gurus share what we know on all things eCommerce.
6. Frequently asked questions
