A home goods brand launched their Shopify store after months of product development and photography. Everything looked polished. A customer ordered the same day.
The order confirmation email arrived in the customer's inbox with a broken image icon where the store logo should be. The checkout page had the same issue. The store owner had uploaded the logo to the theme editor and it looked fine on the homepage — but hadn't set up the email logo separately.
The customer's first post-purchase touchpoint was a broken brand experience.
Shopify uses your logo in more places than most store owners realise, and each one has different requirements. Here's every placement and how to get it right.
The Five Places Shopify Uses Your Logo
1. Theme header — The main navigation area at the top of your storefront. This is the primary logo placement most customers see.
2. Favicon — The small icon in browser tabs and bookmarks. Defaults to a generic Shopify icon unless you set one.
3. Email notifications — Order confirmation, shipping confirmation, abandoned cart, and other transactional emails. These go to every customer.
4. Checkout page — Shopify's hosted checkout displays your logo at the top. This is separate from your theme settings.
5. Gift cards — If you sell gift cards, your logo appears on them.
Missing any of these creates a disjointed brand experience. Customers see your store in multiple contexts across a purchase journey, and each context should feel consistent.
Theme Header Logo
Recommended size: 400–600px wide, up to 200px tall. Shopify themes display logos at the width you upload, scaled to fit the header.
Format: PNG with a transparent background. A white-background PNG will show a white rectangle in your header, especially visible on dark or coloured theme headers.
Upload location: Shopify admin → Online Store → Themes → Customize → Header → Logo
Key considerations:
- Your theme has a maximum logo width setting. If your logo appears too large or too small, adjust it in the header section settings (not just by uploading a different size).
- Test on mobile. The header on mobile typically shows a smaller version. Make sure your logo is readable at the mobile width — usually 150–200px.
- Dark theme header + dark logo = invisible logo. You need either a light/white version of your logo for dark headers, or a full-colour version with enough contrast.
Favicon
Required size: 32×32 pixels (Shopify also accepts larger — 512×512 is ideal and Shopify scales it down)
Format: PNG, ICO, or SVG
Upload location: Shopify admin → Online Store → Themes → Customize → Favicon
Shopify's favicon cropping is square, not circular. Unlike social media platforms that crop to circles, you can use your full logo mark here. But keep in mind 32×32 is very small — your icon mark or initial will work; your full wordmark won't.
Read our favicon from logo guide for a full walkthrough of creating a proper favicon.
Email Notification Logo
This is the most commonly missed one. Email logos are configured separately from your theme.
Upload location: Shopify admin → Settings → Notifications → scroll to "Customize email notifications" → Upload logo
Recommended size: 200–400px wide, exported at 2x for retina (so 400–800px wide PNG that you set to display at 200–400px)
Format: PNG with transparent background or white background (most email clients display on white)
Critical note: The logo you upload here is what appears on all transactional emails — order confirmations, shipping updates, abandoned cart emails, and more. This is often the first logo a customer sees after placing an order. A broken image here undermines post-purchase trust.
Shopify hosts this image on their CDN. Upload it through the settings above — don't try to link to your own hosting.
Checkout Page Logo
Shopify's checkout is hosted at checkout.shopify.com and is separate from your storefront theme. It has its own branding settings.
Upload location: Shopify admin → Settings → Checkout → customize the look and feel → Logo
Recommended size: 200–400px wide
Format: PNG
The checkout page has a white background in most configurations. A dark logo PNG (with transparent background) works well here.
If you're on Shopify Plus, you have more customisation control over the checkout. Standard and Advanced plans use Shopify's hosted checkout with limited logo branding options.
Gift Card Logo
If you sell gift cards, your logo is printed/displayed on the digital gift card design.
Upload location: Shopify admin → Products → Gift cards → Customize
The gift card uses the same logo as your checkout settings by default. No separate upload required unless you want a specific version.
Making Your Logo Work Across All Placements
The challenge is that different placements have different backgrounds and size requirements. A single logo PNG rarely works perfectly everywhere.
What you need at minimum:
- Dark logo, transparent background — for light header backgrounds, checkout, emails
- Light/white logo, transparent background — for dark header themes
- Favicon-sized icon — 512×512 PNG of just the icon mark
- Email-optimised PNG — 2x export for retina email clients
All of these should come from the same vector source file. If your logo was delivered as a single JPEG, you're missing versions that half your placements need.
The brand identity for e-commerce post covers the broader brand system for online stores. For getting your logo files sorted, our logo cleanup service delivers the complete set.
Get Your Shopify Logo Files Ready
We prepare every version your Shopify store needs — transparent PNG, favicon, email logo, dark mode — from one clean vector source.
For the theme header: 400–600px wide PNG with transparent background. For email notifications: 200–400px wide (export at 2x for retina). For the favicon: 512×512 PNG of your icon mark. For checkout: 200–400px wide PNG.
You uploaded a PNG with a white background instead of a transparent background. Re-export your logo as a PNG with transparency enabled (look for the checkerboard pattern when exporting). Upload the new file in your theme settings.
Go to Shopify admin → Settings → Notifications → Customize email notifications. There's a separate logo upload here — it's independent from your theme logo. This controls what appears on all transactional emails.
Your theme has a maximum logo width setting for mobile. Go to your theme customizer → Header section and look for a mobile logo size or scale setting. You may also need to adjust the max-width value to ensure it fills appropriately on small screens.
The checkout logo is uploaded separately in Shopify admin → Settings → Checkout. You can use the same file as your theme logo, but you need to upload it specifically there — it won't carry over from your theme settings automatically.
Upload a light or white version of your logo for the dark header. Most dark themes have a separate 'light logo' upload option in the header settings, or you can upload only the white version and it'll show against the dark background.
Quick Answers
My order confirmation emails don't show my logo. Why?
The email logo is configured separately from your theme logo. Go to Settings → Notifications in your Shopify admin and upload your logo there. Sending a test email from that page lets you check how it looks.
What format does Shopify accept for logos?
PNG is recommended for best quality and transparency support. Shopify also accepts JPEG and GIF, but JPEGs don't support transparent backgrounds and GIFs have limited colour depth.
My Shopify favicon still shows the Shopify default icon. How do I change it?
Go to Online Store → Themes → Customize → Favicon and upload your icon. It may take a few minutes to update. If it still shows the old icon, do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R).
Can I use an SVG logo on Shopify?
Shopify's theme editor accepts SVG for some elements, but for the favicon upload, use PNG. SVG support is inconsistent across Shopify's backend settings. PNG is always the safest choice.
My logo looks pixelated in the Shopify header on retina screens.
Upload a larger file — at least 600px wide for a logo that displays at 300px, or ideally 1200px wide. Shopify scales down but it needs a larger source to appear sharp on high-density displays.