How to Add a Favicon & Brand Assets in Shopify

Add Shopify brand assets by preparing each file for its real container, then using supported brand and theme settings. A favicon needs a simple mark that survives tiny display; a header logo needs readable proportions on configured backgrounds; social sharing imagery needs a deliberate crop and enough context outside the storefront. One large horizontal logo cannot perform every job well.

Work in a draft theme and inventory current assets before replacing them. Record the source artwork, approved variants, owner, licensing, export settings, and usage rules. Keep editable masters outside Shopify and upload optimized derivatives. This prevents repeated compression of already exported files and gives future editors a trustworthy source.

Create an asset set by role

Prepare a full wordmark for generous horizontal spaces, a compact signature for narrow headers, a standalone symbol for square contexts, and light or dark variants where contrast requires them. Do not manufacture variants by stretching or recoloring finished raster files. Use the brand-approved master and preserve clear space, proportions, and trademark treatment.

Simplify the favicon aggressively. Fine lettering, thin strokes, and multiple words become noise in a browser tab. Test the symbol at actual small size on light and dark browser chrome, not only enlarged on an artboard. Export a clean square file in a format and dimensions supported by the current theme guidance. Shopify may scale the upload, but scaling cannot restore detail that was never suited to the context.

Prepare sharing media separately. A social preview often combines a strong product or brand image with safe composition for several crops. Avoid tiny embedded copy and keep key subjects away from edges. Sharing platforms may choose other page metadata or cache an earlier asset, so the theme setting is an input to verification rather than a guarantee of identical presentation everywhere.

Optimize files before upload

Choose dimensions based on the largest rendered context and expected density, then compress without visible artifacts. Transparent backgrounds are useful for marks placed on variable surfaces, while photographic formats suit complex imagery. Avoid uploading enormous masters for a small header. Unnecessary bytes affect every visit where the asset is loaded, and an oversized logo can also encourage layout settings that waste mobile space.

Use meaningful filenames for custody, but do not rely on filenames as customer-facing alternatives. Verify color profile, transparency edges, sharpness, and crop. Test the light mark on the darkest approved surface and the dark mark on the lightest. If the theme offers only one logo while the header changes background, select a treatment that remains reliable or revise the header surface.

Add the favicon and logo in the draft

Open Online Store and Themes, choose Customize on the unpublished copy, then open Theme settings. Locate the Logo, Brand information, or Favicon area exposed by the installed theme. Select the prepared file, adjust supported width or position controls, and save. Theme labels and available settings vary, so use the vendor documentation when the expected field is absent.

Inspect the Header section as well as global settings. Themes may provide separate desktop, mobile, transparent-header, or sticky-header behavior. Configure only documented variants and ensure a text brand fallback or useful linked-logo name remains available to assistive technology. A home link represented by the logo should have a concise accessible identity rather than an image filename or duplicated marketing sentence.

Use Shopify’s brand settings for assets consumed by supported channels and features, while recognizing that theme-specific fields can remain separate. Record where each asset is authoritative. Updating a brand logo in one admin surface does not prove every theme, notification, checkout context, app, or social preview has adopted it.

Verify every rendering context

Preview homepage, product, collection, search, cart, article, account entry, and policy pages. Check the initial header and its scrolled or sticky state, mobile drawer, announcement bar, and localization controls. Confirm the logo does not crowd navigation, become illegible on media, or shift layout when it loads. Use long menu labels and text zoom to expose tight header assumptions.

Open a fresh browser context and inspect the tab icon at normal scale. Favicons are cached aggressively by browsers and intermediaries, so an old icon may persist after a correct update. Confirm the saved theme and public theme separately, allow caches to refresh, and avoid repeatedly changing code to solve a stale local tab. Document the test context and time.

Share representative product and article links through the team’s supported preview tools to inspect social imagery and titles. Verify that the image is current, the crop preserves the subject, and page-specific content does not misleadingly inherit a generic campaign. Never publish test shares containing confidential draft links or unreleased claims.

1. Inventory approved masters, variants, licenses, ownership, and current storefront placements.
2. Export a simple square favicon, responsive logo set, and separately composed sharing image.
3. Optimize dimensions, transparency, contrast, crop, file size, and language-independent meaning.
4. Add assets through supported brand, theme, and header settings on an unpublished copy.
5. Inspect public and draft headers, mobile states, browser tabs, linked-logo naming, and sharing previews.
6. Record authoritative locations and keep source files plus replacement instructions for future editors.

Failure modes and recovery

If a logo becomes tiny, do not increase its width indefinitely. Check whether empty transparent canvas surrounds the visible mark, whether the wrong horizontal variant was uploaded, and whether header controls reserve space for navigation. Re-export a tightly bounded, context-appropriate asset from the master. If it disappears on one page, inspect header background and local transparent-header configuration before adding CSS.

If the old favicon remains, verify that the change was saved to the intended theme, test a fresh profile or device, and account for cache delay. If social shares remain stale, use the relevant platform’s supported refresh process and verify page metadata. These cache problems differ from a missing asset; diagnose the delivery path before replacing a correct file.

If alternative text repeats nearby branding or reads as a filename, revise the accessible name at the owning setting or implementation. If an app controls the image, change it there rather than layering a theme override. Keep the draft unpublished when brand treatment obscures navigation, lacks contrast, or creates significant layout movement.

Worked rebrand scenario

A fashion merchant receives a wide wordmark, monogram, and campaign lockup. The wide mark works in desktop navigation but becomes unreadable on mobile, so the monogram is assigned through the theme’s supported compact treatment. A transparent header places white artwork over photography; testing reveals pale product images erase it, so the team uses a stable header surface instead of maintaining dozens of image-specific exceptions.

The favicon uses the monogram without its fine border, while the social image combines one representative product with generous safe space. Review covers browser tabs, sticky header, mobile drawer, checkout-adjacent brand context, product links, and translated navigation. The campaign lockup remains campaign media rather than replacing the enduring store identity.

Conclusion

Brand assets succeed when designed for context, added through owned settings, and verified beyond the editor preview. Maintain approved masters, export restrained derivatives, give favicons and logos different jobs, and protect contrast plus accessible identity across responsive headers. Treat browser and social caches as delivery states to inspect. A compact governed asset set is stronger than one file forced into every surface.

Frequently asked questions

Why is my new favicon not visible?

First confirm the intended theme saved the asset, then test a fresh context and allow browser or intermediary caches to update before changing implementation.

Should the header logo have alternative text?

A linked logo needs a concise accessible identity, usually the store name and home-link purpose as implemented. Avoid filenames and repeated promotional copy.

Can I use one logo on every background?

Only if contrast remains reliable. Otherwise use supported light and dark variants or provide a stable header surface rather than uncontrolled image-dependent treatment.

Does a theme download preserve original design files?

No. Keep editable brand masters and licensing records in controlled design storage; Shopify receives exported delivery assets.