Every Shopify store gets a generic default favicon — replacing it with your brand icon is one of the quickest trust wins you can make. Shopify makes this easy via the theme editor, no code required. Here's the step-by-step.
The easy way: upload via Theme settings
- First, generate a 32×32 (or up to 180×180) PNG from your logo.
- In your Shopify admin, go to Online Store → Themes.
- Next to your live theme, click Customize.
- In the theme editor sidebar, click Theme settings (the gear icon at the top).
- Find the Favicon section and click Select to upload your PNG.
- Click Save.
Need a Shopify-ready favicon PNG? Upload your logo to Favicon.one and download a package with every size Shopify might need.
Shopify favicon size requirements
- Shopify recommends a 32×32 PNG as the display size.
- You can upload a larger square image (up to 180×180); Shopify resizes it.
- Use a PNG with transparency so the icon looks clean in browser tabs.
- Keep the file under 1 MB.
The favicon looks different in Google Search
A common complaint: your favicon looks right in the browser tab but wrong (or missing) in Google search results. This is usually caching — Google re-crawls favicons on its own schedule, sometimes taking days or weeks. Fixes:
- Request re-indexing of your homepage in Google Search Console.
- Make sure your favicon is a square of at least 48×48 (multiples of 48 are ideal).
- Verify the
<link rel="icon">tag is in your store's HTML.
Manual method: edit your theme code
If your theme doesn't expose a favicon setting, you can add one manually.
- Upload your favicon file under Content → Files (or via Settings → Files) and copy its URL.
- Go to Online Store → Themes → Actions → Edit code.
- Open
layout/theme.liquid. - Inside the
<head>tag, add:
<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}">
<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_url }}">(Use the Shopify asset_url filter if you put the files in your theme's assets/ folder, or paste the full file URL from Content → Files.)
Checkout favicon
On Shopify Plus, you can customize the checkout favicon via the checkout.liquid layout. On standard plans, the checkout uses your store favicon automatically once it's set in Theme settings.
My Shopify favicon isn't showing
- Clear cache. Shopify CDN caches favicons — wait a few minutes or preview a different browser.
- Wrong file type. Shopify's uploader prefers PNG. Convert your ICO/JPG first.
- Theme override. Some custom themes hardcode a favicon in
theme.liquid. Check there. - Non-square image. Crop to 1:1 before uploading.
For the general checklist, see “Favicon Not Showing?”.
Generate a clean, transparent PNG favicon for your Shopify store — free at Favicon.one.