Where do I upload a favicon in Shopify?

In the theme editor: Online Store, then Themes, then Customize, then Theme settings, then Brand or Favicon. Upload a square image of at least 512x512px and save.

What favicon size does Shopify use?

Shopify resizes your uploaded image down to 32x32px for the browser tab. Upload a much larger square (512x512 or more) so the downscale stays crisp.

Can I add an Apple touch icon and PWA icons to Shopify?

Yes, but not through the default picker. Upload the files under Settings, then Files (or theme Assets) and reference them in theme.liquid with link tags using the asset_url filter.

Why does my Shopify favicon look blurry?

You likely uploaded a small or non-square source image. Replace it with a square 512x512px or larger PNG so Shopify has clean pixels to downscale from.

All platforms

Favicon for Shopify

How to add a favicon in Shopify

To add a favicon in Shopify, open Online Store, then Themes, click Customize, go to Theme settings, then Brand (or Favicon), and upload a square image at least 512x512px. Shopify resizes it and serves it across your storefront automatically.

What you need

A square logo, 512x512px or larger, ideally a PNG.
Most Online Store 2.0 themes expose a Favicon picker in the theme editor.
For a complete set you can edit theme.liquid and host files in the Assets folder.

Step-by-step: add a favicon in Shopify

Open the theme editor. From your Shopify admin, go to Online Store, then Themes, and click Customize on your live theme.
Find the favicon setting. Open Theme settings (the gear icon), then look under Brand or Favicon. Click Select image and upload a square image of at least 512x512px.
Save. Click Save. Shopify resizes the image to 32x32 for the browser tab and serves it across the storefront.
Add a full set manually (optional). Upload generated icon files to Settings, then Files (or the theme Assets folder) and reference them in theme.liquid using the asset_url filter for an Apple touch icon and manifest.

For a custom set, add to theme.liquid inside <head> (use Shopify asset URLs):

<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">
<link rel="manifest" href="{{ 'site.webmanifest' | asset_url }}">

Common mistakes to avoid

Relying only on the theme picker, which resizes to 32x32 and skips Apple touch and PWA icons.
Uploading a rectangular image - Shopify squishes or crops it.
Hard-coding absolute paths instead of the asset_url filter, which breaks on the CDN.
Not testing on mobile, where the Apple touch icon is what users actually see when they add to home screen.

Free forever, no sign-up

Generate a complete icon set for Shopify

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Shopify. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I upload a favicon in Shopify?: In the theme editor: Online Store, then Themes, then Customize, then Theme settings, then Brand or Favicon. Upload a square image of at least 512x512px and save.
What favicon size does Shopify use?: Shopify resizes your uploaded image down to 32x32px for the browser tab. Upload a much larger square (512x512 or more) so the downscale stays crisp.
Can I add an Apple touch icon and PWA icons to Shopify?: Yes, but not through the default picker. Upload the files under Settings, then Files (or theme Assets) and reference them in theme.liquid with link tags using the asset_url filter.
Why does my Shopify favicon look blurry?: You likely uploaded a small or non-square source image. Replace it with a square 512x512px or larger PNG so Shopify has clean pixels to downscale from.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.