How to Add a Favicon & Brand Assets in Shopify

To add a favicon in Shopify, go to Online Store > Themes > Customize, open Theme settings, and look for a Favicon field under general or logo settings — upload a square image (ideally 32x32px or larger, PNG format) and save. That single upload only covers the browser-tab icon, though. A complete brand-asset setup also touches your social share image, your theme's logo slots, and a few metadata fields most merchants never open, and this guide walks through each one.

Why the Favicon Is the Smallest Part of the Job

A favicon is the tiny icon that shows up in a browser tab, in bookmarks, and in mobile home-screen shortcuts. It matters more than its size suggests: shoppers who keep a dozen tabs open rely on it to find your store again, and a missing or blurry favicon (Shopify's generic default) makes a storefront feel unfinished even if the rest of the design is polished. But the favicon is only one asset in a small family that together makes a store look intentional rather than half set up. This guide covers all of them, in the order most merchants actually need to configure them.

Step 1: Prepare Your Image Files Before You Touch the Admin

Doing the file prep first saves you from re-uploading later. You will typically want three separate assets, since they serve different purposes and different aspect ratios:

1. Favicon: a square image, minimum 32x32px, ideally exported at 512x512px so Shopify and browsers can downscale it cleanly. PNG with a transparent or solid background works best — avoid fine detail or small text, since it will render at a tiny size.
2. Logo: your main store logo, usually a wide or square PNG or SVG, used in the header and often the checkout. Keep a version with a transparent background so it sits cleanly on both light and dark theme sections.
3. Social share image (Open Graph image): a 1200x630px image used when your store's homepage or product pages are shared on social media or pasted into Slack/Discord/iMessage. This is a separate asset from the favicon and logo, and it is the one most merchants forget entirely.

A simple, consistent mark — your logo simplified down to an icon, or a monogram — usually works better as a favicon than a shrunk version of a wordmark logo, which tends to blur into an unreadable smudge at 16-32px.

Step 2: Upload the Favicon in Theme Settings

In the Shopify admin, go to Online Store > Themes, find your live (or preview) theme, and click Customize. Once inside the theme editor, look at the left sidebar for Theme settings — usually a gear icon at the top or bottom of the panel, separate from individual page/section settings. Well-organized themes group logo and favicon fields together under a Logo or Header settings group, since most storefronts treat them as one branding step.

1. Open Theme settings and locate the Favicon upload field.
2. Upload your prepared square image. Shopify will handle the resizing for browser tabs automatically once it has a clean square source.
3. Save the theme settings.
4. Preview the storefront in a new browser tab (a hard refresh may be needed — favicons are aggressively cached by browsers) to confirm the icon shows correctly.

If you do not see a dedicated favicon field, check your theme's documentation — some themes fold the favicon into general Logo settings rather than giving it its own labeled field. Themes built with clear settings organization, like our Optics and Electronix Shopify themes, group these branding fields together so this step does not require hunting through unrelated sections.

Step 3: Set the Social Share (Open Graph) Image

This is the image that appears when someone shares a link to your store on social platforms or messaging apps, and it is controlled separately from the favicon. In the Shopify admin, go to Online Store > Preferences. Scroll to the Social sharing image field and upload your 1200x630px image. This single upload becomes the default share image for your homepage and any page that does not have its own specific image set (product pages typically use the product photo instead).

Skipping this step means social shares of your homepage either show a blank gray box or, depending on the theme, fall back to whatever image happens to be first in the page's markup — rarely a flattering result. It takes one upload to fix permanently.

Step 4: Confirm Store Name, Meta Description, and Title Formatting

Brand assets are not only images. Still under Online Store > Preferences, check the Title and Meta description fields — this is the text that shows in search-engine results and browser tab titles alongside your favicon. A generic, unedited title (often just the theme's placeholder text) undercuts the polish of a properly configured favicon and logo. Write a short, accurate description of what the store sells; this also doubles as your default meta description for search engines.

Step 5: Check the Logo Across Every Placement, Not Just the Header

A logo uploaded once in Theme settings does not always propagate everywhere a brand mark shows up. After uploading, check:

• Header, on desktop and mobile — some themes use a different logo size or crop on mobile, so check both breakpoints.
• Footer — many themes have a separate logo field for the footer that is easy to leave blank.
• Checkout — Shopify checkout branding is configured separately, under Settings > Checkout > Customize, and does not automatically inherit your theme's logo upload.
• Email notifications — under Settings > Notifications, the logo used in order confirmation and shipping emails is its own upload, distinct from the storefront logo.

Each of these is a small, separate setting, and it is common for a store to have a sharp favicon and header logo but a default Shopify placeholder still showing in order-confirmation emails. Working through this list once after a rebrand or new theme install closes that gap.

Common Favicon Problems and Fixes

The favicon still shows the old image after uploading a new one

This is almost always browser caching, not a Shopify problem. Favicons are cached more aggressively than most page assets. Try a hard refresh, open the store in a private/incognito window, or wait — some browsers only re-check a favicon after closing and reopening the tab entirely.

The favicon looks blurry or pixelated

This usually means the source image was too small or too detailed for the size it renders at. Re-export at 512x512px minimum, and simplify the design — a favicon rendered at 16-32px cannot hold fine detail or small text, so a bold, simple icon reads far better than a shrunk full logo.

There is no favicon field in Theme settings at all

Older or very minimal themes sometimes omit a dedicated favicon setting. In that case, check the theme's settings for a general logo field that doubles as the favicon source, or consult the theme's documentation. If you are choosing a theme and want this handled cleanly from the start, browse our Shopify themes catalog — a theme with a well-organized settings panel makes small brand details like this a non-issue rather than a workaround.

A Short Checklist to Confirm You Are Fully Set Up

1. Favicon uploaded in Theme settings and verified in a fresh browser tab.
2. Social sharing image uploaded under Online Store > Preferences.
3. Store title and meta description updated from the theme's placeholder text.
4. Logo checked on desktop header, mobile header, and footer.
5. Checkout branding configured separately under Settings > Checkout.
6. Email notification logo uploaded under Settings > Notifications.

None of these steps are difficult individually, but they live in different corners of the Shopify admin, which is why brand assets are one of the most commonly half-finished setup tasks after a theme install or rebrand. Working through the full list once, rather than stopping after the favicon, is what makes a store feel finished across every place a customer encounters it — tab, search result, social share, and inbox alike.

Frequently Asked Questions

What image size and format should a Shopify favicon be?

Use a square PNG, ideally exported at 512x512px so it downscales cleanly to whatever size a browser tab needs (commonly 16-32px). Shopify handles the resizing automatically from a clean square source; you do not need to generate multiple sizes yourself.

Is the social sharing image the same as the favicon?

No. The favicon is a small square icon for browser tabs, uploaded in Theme settings. The social sharing image is a separate 1200x630px image uploaded under Online Store > Preferences, used when links to your store are shared on social platforms or messaging apps.

Why does my email order confirmation still show the wrong logo?

Email notification branding is configured separately under Settings > Notifications and does not automatically pull from your theme's header logo upload. Upload your logo there directly to fix it.

Does my theme choice affect how easy this is to set up?

Yes, indirectly. All Shopify themes support a favicon upload, but themes vary in how clearly they organize logo, favicon, and header settings. A theme with a well-labeled settings panel — like our Optics Shopify theme — makes it obvious where each brand asset goes, rather than requiring you to hunt through unrelated sections to find the right field.