The identity of your ecommerce store brings together several elements such as the logo, site colors, and your marketing materials. This identity strengthens your overall brand and creates a healthy reminder for your customers, evoking feelings of comfort and reliability when they see your brand images and colors.
Although small in size, the Favicon also ties into that branding strategy. In this tutorial, we'll show you how to create and add a favicon to your Shopify store, rounding out your online appearance and making it easier to recognize your store when customers visit.
In this article
What's a Shopify Favicon?
A Shopify Favicon, or any Favicon for that matter, is a small icon for your website that appears on the browser tab next to your website name.
The browser address bar is the most common area to view the site Favicon, but it also comes up in the following locations:
- Toolbar apps
- Bookmarks
- History results
- Search bars
- Sometimes when shared on social media
Essentially, whenever the browser needs to show a link to your website, and there's not much room for other content, it replaces your usual, full-size logo with the Favicon.
By default, Shopify adds the Shopify logo for your Favicon, so we need to change that.
A good favicon is often a smaller version of your logo, but sometimes they vary a bit because you want to ensure they are visible, take up all the allotted space, and add a bit of color next to your website name.
By default, all browsers support Favicons sized 32×32 pixels. That's a rather tiny image, but with the help of some online generators you can make your own Shopify Favicon for your website. Also, larger images get scaled down anyway, so you don't necessarily have to get it to exactly 32×32.
A Favicon makes quite a bit of sense for online stores on Shopify since they're easy to add, and it's important to strengthen your brand identity as an online seller. Some also argue that it helps with SEO.
Keep reading to learn more about how to add Favicon to your Shopify store.
How to Add a Favicon to Your Shopify Store – Quick Step Guide
As mentioned, when running a site through Shopify it automatically adds a Shopify logo as your site's Favicon. There's nothing wrong with that, but it's far more professional and brand-oriented to include your own logo. Here are the steps you need to follow:
Step 1: Go to Your Shopify Dasboard
Therefore, go to your Shopify dashboard and click on Online Store under Sales Channels.
Step 2: Navigate to Theme Settings
Navigate to your Themes and click on the Customize button next to your current theme. Although settings change from theme to theme, all the most recent Shopify themes have a section to change the Favicon.
In the Shopify customizer, scroll to the bottom of the list on the left and click on Theme Settings.
Step 3: Select the Favicon Button
In the new section, find and select the Favicon button.
This reveals a button to Select Image or Explore Free Images. I can't imagine they have any free images that match your logo, so it's best to click on Select Image to upload a custom image from your computer.
Step 4: Upload Your Favicon
Choose the Favicon file and upload it to Shopify.
After that, you'll see a preview of your Favicon icon. To make the changes permanent, select the Save button in Shopify.
To view your Shopify favicon in action, go to the frontend of your website and look at the current browser tab. You should see the Favicon next to your site title.
Tips for Creating Your Favicon
Although it seems easy to generate a little icon, it's important to get it right, considering customers see the Favicon whenever they come to your site. It's also easy to make a Favicon that's blurry or doesn't fill the entire space, defeating the purpose of the Favicon since it's not that visible to the eye.
To resolve any problems, here are some tips for creating your Shopify Favicon:
- Start your design larger than 32×32 and shrink it down if need be. You're bound to have a blurrier image if you try to stretch a smaller image into the space. For instance, taking a 32×32 image from Hatchful and trying to stretch it out to get rid of the written part of the logo may cause problems.
- You typically can't just take your current logo and expect it to work perfectly as a Favicon.
- Favicon's look great when you cover every pixel of the provided space. You don't have much room, so you should take advantage of every square pixel in the 32×32 space.
- Remove all text, as it's hard to read in a Favicon. The exception is if your primary logo element is a large letter.
- Shoot for solid, brighter colors. Simple, cartoonish logos work best.
- Look at the Favicons from your favorite brands. What have they done to ensure their online image gets through with a favicon?
- Consider either filling up the entire space with a solid color background or making a transparent background with the foreground element stretched so it just touches the edges. You'll notice that many larger brands have transparent backgrounds for their Favicons.
- The ICO file format works well for smaller images. If you're not familiar, use a PNG for transparent backgrounds or a JPG for high-resolution Favicons with solid backgrounds.
How to Generate a Favicon for Your Shopify Store
You have the option to design a Favicon in any design software of your choice. If you prefer Photoshop, go with that. If you'd rather a free software like GIMP or Pixlr, all of them work as long as you stick to the required dimensions of 32×32.
You also have the option to make a Favicon with Shopify's Hatchful Logo and Free Favicon Generator. View our entire guide on using Hatchful to build a logo.
Once the logo creator does its work, it provides you with a file filled with multiple logo formats, one of which is a Favicon.
Keep in mind that many of the logos you make with Hatchful (read our Hatchful review) use white space around the logo, so you may have to adjust it for the graphic to cover most of the space. In general, I've found that you should only use the provided Hatchful favicon if it already looks good (it fills up most of the space and doesn't have small elements like text).
If that's not the case, use a third-party editing software like Photoshop or Pixlr to cut out some of the unnecessary elements.
Important: You need to use a larger version of the image if you're planning on stretching it over a canvas to cut out text and white space. For this, I used Hatchful to generate logos but actually took one of the large logos (not the Favicon file provided) since I don't want blurring to occur when I stretch it over the 32×32 canvas.
Inside your editing software, choose a new canvas with the Width and Height both set at 32.
Make a layer for the new image and ensure that image is larger than the 32×32 canvas, as you may be stretching it out. Then upload or place the image into the canvas.
In the following screenshot, I have the Favicon design zoomed in so I can make sure it fits the square properly. It's blurry, but I know it will look much better when I zoom out.
As you can see, the zoomed out version of the Favicon in the Pixlr designer looks good. I've covered most of the space allotted, opted for a bright and solid color icon, and removed all signs of smaller text.
The last step is to Download the file. You can choose to make it a transparent PNG at this point. But for this tutorial I'm sticking with a high-resolution JPG so that it looks as sharp as possible. And I don't mind having a background with a solid color.
Go back to your Shopify dashboard. Click on Online Store > Themes > Customize.
Then go to Theme Settings > Favicon.
Upload that new Favicon and click the Save button in the Shopify editor.
Again, the primary way to test out and view your Favicon is by simply opening up a tab with your homepage website URL. As you can see, the Favicon shows up nicely and is actually a little better than my previous Favicon, seeing as how that one didn't fill up the entire 32×32 space provided.
In Conclusion
A Shopify Favicon takes no more than a few minutes to design and add to your site, yet it provides a wonderful reminder to your visitors on which website they're on. In addition, it can serve as a way for people to find your website in their bookmarks and browser histories, considering they're most likely searching through a long list of other sites when going through those sections.
Keep in mind that you shouldn't settle for a blurry or illegible Shopify Favicon image. If you find that the first Favicon doesn't look quite right, or you'd like to cut out some text or add a transparent background, go back to the beginning and get it right. Although it's not a good idea to have no Favicon at all, a blurry or hard-to-see Favicon makes your brand look unprofessional and somewhat silly.
If you have any questions about adding Favicons to Shopify, or making your own Shopify Favicon, let us know in the comments section below.
Comments 0 Responses