All About Web Co. logo
All About Web Co.

Shopify Favicon. How to Add, Update and Remove One

Author: Serhiy Manuilo, Publication Date: Sep 15, 2024, Last Updated: Oct 12, 2024
by Serhiy Manuilo, Oct 12, 2024
The article image: "Shopify Favicon. How to Add, Update and Remove One"

Shopify is a solid e-commerce site builder that has developed a great UI that makes favicon management easy and intuitive so adding, updating, and removing favicon takes almost no effort and time.

To ADD favicon to a Shopify store, navigate to “Online Store” > “Themes”, click on the “Customize” button of the current theme, go to the “Theme settings”, expand the “Logo” section, under “Favicon image” section click “Select image” to upload favicon.

To UPDATE favicon of a Shopify store, navigate to “Online Store” > “Themes”, click on the “Customize” button of the current theme, go to the “Theme settings”, expand the “Logo” section, under “Favicon image” section click on “Change” > “Select from library”.

To REMOVE favicon from a Shopify store, navigate to “Online Store” > “Themes”, click on the “Customize” button of the current theme, go to the “Theme settings”, expand the “Logo” section, under “Favicon image” section click on “Change” > “Remove”.

Shopify Favicon Image Requirements

Favicon Ratio

The most important criteria for favicon regardless of the platform is the image ratio, it have to be Square 1:1.

Favicon Dimensions

When it comes to dimensions, Shopify recommends favicon to have 16x16px or 32x32px of width and height.

Can you upload a bigger image? You can do it, but it will be automatically scaled down. That means Shopify applies some transformations to your favicon image, in this case, you might end up with an image quality different from what you expected.

It makes sense to follow the platform recommendations and create a favicon with proper dimensions right away, there are many favicon generators you can use for that.

Favicon Image Formats

Shopify doesn’t define directly what format a favicon image should have. However, to add favicon you need to use the Shopify image uploader, which supports the following formats for images:

As you can see there’s no .ico on this list, so you can’t use it on Shopify, even though .ico is considered a standard format for favicons due to its wide browser support. You’re free to use any of the formats above.

How to Add Favicon to a Shopify Store?

Follow these 7 (or 14) steps to add favicon:

  1. Navigate to Online Store > Themes
  2. Click on Customize Navigate to the Shopify Store Theme Editor
  3. Go to the Theme settings
  4. Expand the Logo section
  5. If you want to upload your own favicon image, click on Select Image under the Favicon image section Add a favicon to a Shopify store
  6. Click on the Add images button to upload favicon from your machine or select it form your assets gallery Upload a favicon image or select it from your store image gallery
  7. Save the changes Save Changes in Shopify Store Theme Settings
  8. If you don’t have your own favicon yet, you can get one from the free images gallery, to do this click on Explore free images
  9. Select the images from the gallery Select a favicon image from Shopify free images gallery
  10. Click on the Favicon image Navigate to the favicon image editor by clicking on it
  11. Click on the Crop and transform button Start favicon image cropping by clicking on the Crop and transform button
  12. Select the Square (1:1) ratio and crop the image as you need
  13. Apply the changes and Save as new Apply favicon image editing and save the changes
  14. Save the changes

How to Update Favicon of a Shopify Store?

Follow these 7 easy steps to update favicon:

  1. Navigate to Online Store > Themes
  2. Click on Customize Navigate to the Shopify Store Theme Editor
  3. Go to the Theme settings
  4. Expand the Logo section Navigate to the Logo section of Shopify theme settings
  5. Click on the Change button under the current favicon
  6. Click Select from library or Explore free images to set a new favicon Update a favicon image in Shopify
  7. Save the changes Save Changes in Shopify Store Theme Settings

How to Remove Favicon from a Shopify Store?

Follow these 7 easy steps to remove favicon:

  1. Navigate to Online Store > Themes
  2. Click on Customize Navigate to the Shopify Store Theme Editor
  3. Go to the Theme settings
  4. Expand the Logo section Navigate to the Logo section of Shopify theme settings
  5. Click on the Change button under the current favicon
  6. Click Remove Remove favicon from Shopify store
  7. Save the changes Save Changes in Shopify Store Theme Settings

Summary

Shopify provides a user-friendly UI, so it makes it easy to manage image assets including favicons, as a result adding, updating, and removing a favicon takes no more than 5 minutes of work.

To add/update a favicon to a Shopify store, ensure it has a 1:1 ratio, 32x32px dimensions and a .png format.