Logo and favicon settings

These two settings do a lot of quiet work. Your logo is the first thing a shopper sees at the top of every page, and your favicon is what they recognize when your store is one tab among fifteen. Both take a couple of minutes to set, and both start empty, so they are worth handling early.

You will find them in Theme settings (the gear icon at the bottom of the theme editor sidebar), in the Logo and Favicon groups. Settings in this area apply across your whole store. Options that only affect one part of a page, such as how wide the logo sits in the header, live on the individual section instead.

Upload your logo

• Logo: the image shown in your header, and the one handed to search engines as your store’s brand mark. There is no default, so the field is empty until you upload something. A transparent PNG or an SVG works best, because the image then sits on any header color without a pale box around it.

Upload artwork that is comfortably larger than it will appear, around 600 px wide for a horizontal wordmark. The theme scales images down cleanly, and a crisp logo is one of the cheapest ways to look established. Scaling a small file up is the one thing that always shows.

If your logo has a lot of fine detail, consider a simplified version for the web. Header space is limited, especially on a phone, and a mark that is legible at 40 px tall will serve you better than a full illustration.

Check your logo on both light and dark

Because you can give the header a different color scheme from the rest of the page, it is worth checking your logo against every background you actually use. Scroll the homepage in the editor preview, then open a product page, and look at the header in each place.

If your mark only reads well on a light background, keep the header on a light scheme and you are done. If you want the freedom to go dark, a version with a transparent background and a solid, single-color mark travels furthest. See Colors for how schemes are set, and Header and navigation for the header’s own layout options.

Tip

Save your logo with a little breathing room built into the file, but not a lot. Too much empty space inside the image makes the visible mark look small and the header look loose, and no setting can crop it back for you.

Add your favicon

• Favicon: the small icon that appears in browser tabs. It also stands in for your store when a shopper bookmarks you. It is empty by default, and a square image works best.

Favicons are tiny, so treat this as a separate piece of artwork rather than a shrunken logo. A single letter, a monogram, or the simplest shape from your mark will hold up. Thin lines, small text, and taglines all disappear at this size. Upload a square file of at least 128 px so it stays sharp on high-resolution screens, and pick a version with strong contrast against both light and dark browser chrome.

To see it, save your changes and open your live store in a normal browser tab. Tab icons are cached aggressively, so give it a moment or open a fresh tab if the old icon lingers.

Note

Both fields accept anything from your Shopify Files library, so you can upload once and reuse the same artwork later. If you rebrand, changing the image here updates it everywhere the theme uses it, with nothing else to adjust. For guidance on preparing image files in general, see Images.