At White Peak Digital, we want to share our web design expertise to help you create your online store to your specifications. Take a look at our blog for more great tips on navigating your way through Shopify, or continue reading to find out how to change the tab icon on your Shopify store.
What is a Tab Icon or Favicon?
The tab icon is the small image beside the website’s title in the browser tab found at the top of your screen. Tab icons are also referred to as favicons (a shortening of the term ‘favourite icon’), bookmark icons, website icons, URL icons, and other less common names.
Why Change a Tab Icon or Favicon?
Favicons are a great way to improve the overall branding of your site. Though they are small, it improves your brand legitimacy and consumer trust.
Favicons or tab icons don’t directly impact your search engine optimisation. However, they do serve to make your site more visible to regular visitors or new customers.
6 Easy Steps to Add a Favicon to Your Shopify Store
If you want to add or change a favicon or tab icon on your online store, follow these simple steps for your laptop or desktop.
- The first step in changing your tab icon on Shopify is to log in to your Shopify admin account, go down to the “Online Store” section, and select Shopify “Themes”.
- Select your theme before clicking on the “Customise” tab that can be located next to the “Actions” section.
- You will now see the toolbar for the theme editor. Click on the “Theme Settings”.
- In the theme setting section, you will have a list of setting that you can change, including colours, typography, cart page, social media, favicon, and checkout. Click on the “Favicon” option.
- In the favicon section, you will see a blue button that says “Select Image.” Click on this to select an image from your picture library tab, upload your favicon file from your computer, or click the “Explore free images” option below to browse the pre-populated options.
- When you find an image you would like to set as your tab icon, click on it and press “Select.” Before exiting this screen, click on the blue “Save” button in the top right-hand corner of the screen to add the image to your Shopify store.
How to Add a Tab Icon Using a Mobile Device
Changing or adding tab icons to your Shopify store is quick and easy, and you can even do it using your mobile. If you have an iPhone or use an Android device, follow the steps below to update your online store.
Add or Change Your Shopify Tab Icon using an iPhone
- After logging in to your Shopify account, click on the “Store” button that is found near the bottom.
- In the “Store” section, you can then tap on “Online Store” before selecting “Manage Themes.”
- Near the bottom of the next screen, you will see a blue button that says “Customise,” which you should tap.
- On the next page, click “Theme Settings.”
- In the “Theme Settings” section, you will have several choices available in the drop-down, and you can click “Favicon” here.
- You will now find yourself in the favicon image section. Either click on “Select Image” to choose a specific picture you want or click on “Explore free images” to explore the available options.
- You will be able to choose from pictures you have already added to your library, upload from your phone, or choose a free favicon image.
- To confirm your choice and add it to your Shopify store, click “Save.”
Add or Change Your Shopify Tab Icon using an Android Device
- Log into your account and tap on the “Store” section at the bottom of the page.
- Go to the “Sales Channels” section, then click on “Online Store” then “Manage Themes.”
- The next stage will allow you to tap on the “Customise” that can be found beside the “Actions” section.
- Tap on “Theme Settings” and check through the “Favicon” option drop-down.
- After you click on “Favicon” in the drop-down, you will be able to click on “Select Image” or “Browse Free Images.”
- At this point, you will be able to select an image from your phone, your library or browse the favicon image area.
- To confirm your choice and add it to your online store, click “Save.”
How do I make a good tab icon?
Favicons are small, so you won’t be able to include loads of detail, but that doesn’t mean that you don’t have to spend time creating the perfect one. It will be a big part of your brand identity so getting it right is essential. You could use a free favicon generator to create the perfect image.
Choosing the right colours and shapes to make it stand out and fit in with your branding will help. Avoid including too much as this will make it look messy and give people a poor impression of your online store. Try to keep your brand identity as an integral component in creating your favicon.
Are favicons the same size on all browsers?
Using a 16px favicon is advised as this can be used on all browsers, but if you do want to take the time to create different options, the sizing is as follows:
- 16px – Can be used in all browsers.
- 24px – For use on Internet Explorer 9 for pinned sites.
- 32px – Can be used for the ‘Read Later’ Safari sidebar, Windows 7+ taskbar, Internet Explorer new page tab.
- 57px – iOS home screens for iPod touch and first-gen iPhones up to 3G models.
- 72px – For the home screen of an iPad.
- 96px – For Google TV.
- 114px – For the home screen of an iPhone4+.
- 128px – Web store of Chrome.
- 195px – Opera Speed Dial.
What format is best for a favicon?
The best and most supported file type to use is Windows ICO, and the following most widely accepted format would be PNG. If you are unsure or need help creating the perfect eCommerce site for you, get in touch with us today. As trusted Shopify developers, we can help make your dreams a reality.
To your success,