Storefront Notes

How-to's · Shopify · 3 min read

What Is a Favicon on Shopify? A Beginner's Guide

By the Storefront Notes Editorial Team · Updated

Short answer

A favicon is the small icon that appears in browser tabs, bookmarks and sometimes search results next to your store's name. In Shopify, you add it in the theme editor under Theme settings (often in the Logo or Favicon section). Use a simple square image; many themes recommend 32 x 32 pixels or larger.

It is a tiny detail, but a missing favicon makes a store look unfinished. Shoppers with many tabs open use favicons to find your store again, and Google can show them beside search results.

What a favicon is

A favicon (short for "favorite icon") is a small square image associated with a website. It appears:

  • In browser tabs
  • In bookmarks and favorites
  • In browser history
  • On mobile home screen shortcuts (sometimes)
  • In Google search results on many devices

Without one, browsers show a generic icon.

Why it matters for your store

  • Recognition: customers spot your tab among many others.
  • Professionalism: a custom icon signals an established brand.
  • Search presence: Google may show your favicon next to your listing, helping it stand out.
  • Shape: square
  • Size: many Shopify themes recommend about 32 x 32 pixels; uploading a larger square image such as 96 x 96 or more lets Shopify scale it down cleanly
  • Format: PNG works well, especially with a transparent background
  • Design: simple, high contrast, readable at tiny sizes

Google's guidance for favicons in search says they should be square and at least 8 x 8 pixels, with larger sizes recommended for quality, and should visually represent the brand.

Designing a good favicon

  • Use your logo mark or initials, not the full logo with text.
  • Keep detail minimal; fine lines disappear at small sizes.
  • Choose strong contrast that works on light and dark browser themes.
  • Test it by looking at it at actual tab size.

Free design tools like Canva or any image editor can produce a square PNG.

How to add a favicon in Shopify

The exact location varies slightly by theme, but generally:

  1. In Shopify admin, go to Online Store > Themes.
  2. Click Customize on your current theme.
  3. Open Theme settings (often a gear or paint-brush icon).
  4. Find the Logo or Favicon section.
  5. Upload or select your favicon image.
  6. Click Save.

If you are setting up a new theme, repeat this step there too; favicon settings are saved per theme.

Troubleshooting

The old icon still shows

Browsers cache favicons. Try:

  • Hard refresh
  • A private or incognito window
  • Clearing the browser cache
  • Checking on another device

It looks blurry

Upload a larger, crisp square PNG and let Shopify resize it.

It shows a white box

Your image may have a white background that looks odd on dark browser themes. Use a transparent PNG or a deliberate background color.

Google search still shows the old favicon

Google updates favicons when it recrawls your home page, which can take time.

Favicons and mobile home screens

When someone adds your store to their phone's home screen, devices may use a larger icon than a browser tab favicon. Some themes and apps let you set a separate touch icon, and Shopify themes generate sizes from your uploaded image where supported. Starting with a crisp, square image of at least a few hundred pixels gives the best results across devices.

Also think about contrast. Many people use dark mode in their browser, where a black logo on a transparent background can disappear. A solid background color behind your mark, or a light outline, keeps the icon visible in both light and dark themes.

Other branding details to check

While you are in theme settings:

If you are still connecting your domain, make sure SSL is active; see SSL pending on Shopify. And if you want to remove default Shopify branding from your footer, read how to get rid of "Powered by Shopify".

Frequently asked questions

What size should a Shopify favicon be?

Square images work best. Many themes recommend around 32 x 32 pixels, though uploading a larger square image lets Shopify resize it.

Why isn't my new favicon showing?

Browsers cache favicons aggressively. Clear your cache, try a private window or wait a little. Also confirm you saved the change on the published theme.

Does a favicon affect SEO?

It does not directly affect rankings, but Google can show favicons in search results, so a clear icon helps your listing stand out.

Sources and further reading

Platform features, prices and policies change. Check the official help pages linked above before you act on a detail that matters to your store.

Related guides