Your ecommerce store’s brand comprises various pieces, including the logo, site colours, and marketing materials. This identity reinforces your whole brand and serves as an excellent reminder to your clients, instilling comfort and reliability sentiments when they see your logo and colours. Despite its tiny size, the Favicon contributes to the branding strategy. In this guide, we’ll show you how to build and add a favicon to your Shopify store, which will complete your online appearance and make it easier for customers to remember your store when they come.
What is a Shopify Favicon, exactly?
A Shopify Favicon, or any Favicon, is a little icon that appears next to your website name on the browser tab.
The most typical place to see the site Favicon is in the browser address bar; however, it can also be found in the following places:
- Toolbar apps
- Bookmarks
- History results
- Search bars
- Sometimes when shared on social media
When a browser wants to display a link to your website, and there isn’t much room for other content, it uses the Favicon instead of your full-size logo.
Shopify puts the Shopify logo to your Favicon by default, so we need to update that.
A decent favicon is usually a smaller version of your logo. Still, they can vary slightly depending on whether you want them to be visible, take up all of the available space, or offer a splash of colour next to your website name.
All browsers allow Favicons with a size of 3232 pixels by default. That’s a small graphic. However, you may design your own Shopify Favicon for your website with the help of some internet generators. You don’t have to get it to precisely 3232 because larger photos are scaled down regardless.
Because they’re easy to install and vital to establishing your brand identity as an online seller, a Favicon makes sense for online retailers on Shopify. In addition, some think that it aids SEO as well.
Continue reading to discover how to add a Favicon to your Shopify store.
How to Make Your Shopify Store Have a Favicon
When you run a site with Shopify, a Shopify logo is immediately included as your site’s Favicon. There’s nothing wrong with it, but including your logo is significantly more professional and brand-oriented.
As a result, navigate to your Shopify dashboard and select Online Store from the Sales Channels menu.
Go to your Themes and click the Customize button next to the theme you want to change. Even though settings vary per theme, all of the most recent Shopify themes include a section for changing the Favicon.
Scroll to the bottom of the left-hand list and choose Theme Settings in the Shopify customizer.
Locate and choose the Favicon button in the new section.
This exposes a button that allows you to select an image or search for free images. Unfortunately, I doubt they have any free photos that match your logo.
Therefore, it’s preferable to select a bespoke image from your PC and upload it.
Select and upload the Favicon file to Shopify.
You’ll see a preview of your Favicon icon after that. Select the Save button in Shopify to make the changes permanent.
Go to the front of your website and look at the current browser tab to see your Shopify favicon in action. The Favicon should appear next to your site’s title.
Tips for Creating Your Favicon
Although it may be a simple task to create a small icon, it is critical to get it correctly because clients will see the Favicon every time, they visit your website.
Unfortunately, it’s also simple to create a blurry Favicon that doesn’t occupy the entire space, defeating the purpose of the Favicon because it’s not easily seen.
Here are some tips for making your Shopify Favicon to help you address any issues:
Start with a larger design than 3232 and then shrink it if necessary. If you try to squeeze a smaller image into a smaller space, the result will almost certainly be a blurry image. Taking a 32×32 image from Hatchful and stretching it out to remove the written part of the logo, for example, could pose issues.
You can’t just use your present logo as a Favicon and expect it to operate flawlessly.
It looks fantastic when you fill every pixel of the available space with a favicon. However, you should make the most of every square pixel in the 32×32 area because you don’t have much space.
Remove all text from the Favicon because it is difficult to read. If your principal logo element is a huge letter, you can make an exception.
Choosing solid, bolder hues is a good idea. Logos that are simple and cartoonish work best.
Take a look at your favourite brands’ Favicons. What steps have they taken to ensure their online image is conveyed through a favicon?
Consider using a solid colour background that fills the entire space or transparent background with the foreground piece stretched to touch the edges. You’ll note that many major firms’ Favicons have transparent backgrounds.
For tiny graphics, the ICO file format is ideal. Use a PNG for transparent backgrounds and a JPG for high-resolution Favicons with solid backgrounds if you’re not familiar.
How to Generate a Favicon for Your Shopify Store
You can create a Favicon using any design software you like. If you prefer Photoshop, go ahead and use it. If you prefer free software, such as GIMP or Pixlr, they will function as long as you keep the dimensions at 3232.
To create a Favicon, you may also use Shopify’s Hatchful Logo and Free Favicon Generator. Please view our complete guide on creating a logo with Hatchful.
After the logo creator has completed its work, you will receive a file containing numerous logo types, one of which is a Favicon.
Keep in mind that many of the logos you create with Hatchful (see our Hatchful review) have white space around them, so you may need to alter the graphic to fill the area. In general, I’ve found that you should only utilize the Hatchful Favicon if it already looks excellent (it takes up the majority of the space and lacks minor items such as text).
If it isn’t possible, utilize a third-party editing programme like Photoshop or Pixlr to remove some of the extraneous parts.
Necessary: If you’re going to stretch the image over a canvas to take off text and white space, you’ll need to use a larger version of the image. I used Hatchful to produce logos for this. However, I used one of the more prominent logos (rather than the Favicon file offered) because I didn’t want any blurring when stretching it across the 32×32 canvas.
Choose a new canvas with the Width and Height both set to 32 in your editing software.
Create a new layer for the new image, and make sure it’s bigger than the 32×32 canvas because you’ll be stretching it out. The image is then uploaded or placed into the canvas.
I’ve zoomed in on the Favicon design in the following screenshot to make sure it fits the square appropriately. It’s a little hazy right now, but I know it’ll look better when I zoom out.
The zoomed-out version of the Favicon in the Pixlr designer looks good, as you can see. I’ve used up most of the available area, went with a bright and solid colour symbol, and erased all traces of tiny writing.
The final step is to save the file to your computer. At this stage, you have the option of making it a transparent PNG. However, I’m using a high-resolution JPG to keep the image as sharp as possible for this lesson. I also don’t mind having a solid-colour background.
Return to the Shopify dashboard. Select Online Store > Themes > Customize from the drop-down menu.
Then go to Favicon> Theme Settings.
In the Shopify editor, upload the new Favicon and hit the Save button.
Again, the most straightforward approach to seeing and testing your Favicon is opening a tab with your homepage website URL. As you can see, the Favicon looks excellent and is a little better than my previous one, which didn’t fill up the entire 3232 space available.
Final Thoughts
It only takes a few minutes to design and add a Shopify Favicon to your site, but it serves as a great reminder to your visitors about which website they’re on.
Furthermore, it can help users find your website in their favourites and browser history, as they’re likely searching through a massive list of other websites while browsing those parts.
Keep in mind that a blurry or illegible Shopify Favicon picture is not acceptable. If you discover that the initial Favicon isn’t perfect, or if you’d like to remove some text or add a translucent backdrop, go back to the beginning and make the necessary changes. Although having no Favicon is not a good idea, having a fuzzy or difficult-to-see Favicon makes your brand appear amateurish and somewhat comical.
