Resize Your Logo for a Shopify Store: Header, Favicon, Checkout and Emails

How Shopify sizes your header logo

Online Store 2.0 themes, including Shopify’s free Dawn family, let you upload a logo image and then set a logo width with a slider in the theme editor (in Dawn this is under the Header or Logo settings, typically ranging from 50 to 300 px on desktop). The theme displays the logo at that width, keeping its proportions, and requests an appropriately sized version from Shopify’s image CDN.

Two consequences:

• The file you upload is the maximum quality available. Shopify can make it smaller, never sharper. Upload at least 2× the display width so it is crisp on retina screens — 500–600 px wide for a 250–300 px logo. Uploading a 3000 px file is fine; the CDN downsizes it.
• Height follows width. A tall stacked logo at 250 px wide can push your header very tall. Most stores should use the horizontal logo in the header.

Recommended Shopify logo sizes

Admin labels move occasionally between Shopify updates; if a menu differs, search the admin for “logo” or “favicon”.

Preparing the header logo file

1. Start from the horizontal logo master — ideally a vector or a large transparent PNG.
2. Trim empty space around the artwork. Extra transparent padding in the file makes the logo look smaller than the width you set, because the theme scales the whole file including the padding.
3. Export at 2× your target width. The 600 × 200 transparent preset works for most horizontal logos.
4. If your header is dark or overlays a hero image (a “transparent header” option in many themes), prepare a white version — some themes have a separate field for the transparent-header logo.
5. Keep it light: under 50 KB is easy for a flat logo; see file size fixes.

Mobile header: the most-seen version

Most e-commerce traffic is mobile, and on phones your logo shares a narrow header with the menu, search and cart icons. Many themes shrink it to around 100–160 px wide. At that size a long wordmark with a tagline becomes unreadable.

• Remove taglines from the header logo entirely.
• If your wordmark is long, consider a shorter lockup or icon-plus-short-name for mobile (some themes allow a separate mobile logo; otherwise custom CSS can swap it).
• Preview in the theme editor’s mobile view and on a real phone.

Favicon for Shopify

Shopify recommends a 32 × 32 px favicon, and the theme resizes whatever square image you upload. Because the favicon is also used by Google in mobile search results (where it must be at least 48 × 48 and square), upload a crisp square of 96 × 96 or larger rather than exactly 32 × 32. Use your icon or initial, not the full wordmark. Our favicon guide explains how to simplify a logo for 16 px.

Checkout branding

Checkout has its own branding settings, separate from the theme. Upload your logo there so customers see a consistent brand at the most trust-sensitive moment. Use the horizontal logo on transparent background, check it on the checkout’s background colour, and pick a size that does not push the order summary down on mobile. Some advanced checkout customisation depends on your Shopify plan.

Order confirmation and shipping emails

Shopify notification emails show a logo at the top of every template. In the notification customisation screen, upload the logo and set its width (for example 180–200 px). Upload the file at 2× that width. Emails are affected by dark mode in Apple Mail and Outlook, so a dark logo on transparency can disappear — our email logo guide covers the fixes.

Common Shopify logo problems

• Logo looks blurry: the uploaded file is narrower than 2× the display width. Re-upload a larger file.
• Logo looks tiny despite a large width: the file has lots of empty padding. Trim it.
• Logo pushes the header tall: you uploaded a stacked or square logo. Use a horizontal version.
• Different logo at checkout: checkout branding is set separately — update it there.
• Old favicon still showing: browser caching. Test in a private window.