How to Add a Favicon in Shopify & Website Builders

Almost every hosted website builder has a built-in favicon upload tucked into its theme or brand settings. You don’t touch HTML and you don’t upload a folder of files — you give it one square image and hit publish. Use a 512×512 source if you can (32×32 is the absolute minimum), and the builder generates the smaller versions for tabs and mobile. Shopify, Squarespace, Wix, and Webflow each call it something slightly different — “Favicon,” “Browser Icon,” or “Webclip” — but the job is identical: upload a square image, save, done.

In one line: on a website builder, a favicon is one square image uploaded in theme or site settings, then published.

The catch is what the builder does with that image. Below are the exact steps per platform, plus the one limitation they share — and when it’s worth generating the full set yourself instead.

How to add a favicon in Shopify

Shopify puts the favicon in the theme editor, not the main admin settings:

1. From your admin, go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the editor sidebar, open Theme settings (the gear or paintbrush icon near the bottom).
4. Find the Favicon section and click Select image.
5. Upload your image or pick one from your files.
6. Click Save.

Shopify displays the favicon at 32×32, but upload a larger square — 512×512 is the sweet spot — so it stays crisp when scaled for high-DPI tabs and home-screen saves. A PNG works well; if your logo has a transparent background, the favicon will keep it. The setting is per-theme, so if you switch or duplicate themes you’ll need to set it again.

How to add a favicon in Squarespace

Squarespace doesn’t use the word “favicon” — it calls it a Browser Icon:

1. Open your site and go to Design.
2. Open Logo & Title (newer templates) or Browser Icon (older ones).
3. In the Browser Icon / Favicon area, click Upload Image.
4. Choose a square image, ideally 512×512.
5. Save, then check a tab to confirm.

Squarespace generates the smaller sizes from your upload, so one good square image is enough. If you’ve added a custom logo, the Browser Icon is set separately — uploading a logo does not automatically set the favicon.

How to add a favicon in Wix

On Wix, the favicon control is a premium-plan feature — free sites show Wix’s own icon and have no upload option:

1. Go to your site’s dashboard.
2. Open Settings → Website settings (the favicon may sit under a “Favicon” or “Site assets” sub-section depending on your editor).
3. Click to upload your favicon image.
4. Use a square image; 512×512 gives Wix the most to work with.
5. Save and publish.

If you don’t see the option, check that you’re on a paid plan with a connected domain — that’s almost always why it’s missing. Wix shows a live preview so you can confirm the icon before publishing.

How to add a favicon in Webflow

Webflow is the one builder that asks for two images, and it’s worth filling both:

1. Open your project and click the gear icon (Project Settings) in the left sidebar.
2. Go to the General tab.
3. Scroll to Favicon & Webclip.
4. Upload a 32×32 image to the Favicon field — the icon shown in browser tabs.
5. Upload a 256×256 image to the Webclip field — the Apple touch icon used when someone saves your site to an iOS home screen.
6. Publish the site to apply the change.

The Webclip is effectively your apple-touch-icon, so give it a solid (opaque) background — transparent artwork can turn black on iOS. For the favicon field itself, a clean square logo at 32×32 or larger is fine. (Full Webflow walkthrough →)

The limitation every builder shares

Here’s the trade-off nobody mentions on the upload screen: builders take one image and generate a limited set. You typically get an ICO and a couple of resized PNGs — and that’s it. What you usually don’t get:

• A modern favicon.svg (the sharp, scalable, dark-mode-capable primary icon)
• A properly padded maskable icon with art inside a 409×409 safe zone for Android adaptive shapes
• Control over the apple-touch-icon being opaque with the right padding (Webflow’s Webclip is the exception)

For most stores and brochure sites, that limited set is genuinely fine — browser tabs and bookmarks will show your icon. But if you want the complete modern package — SVG-first, a multi-size favicon.ico, an opaque 180×180 Apple touch icon, and a separate maskable PWA icon — the builder’s single upload won’t produce it.

The fix is to generate the set first, then feed the builder the right file. FaviconBuilder takes one logo (SVG preferred, or a PNG/JPG at 512×512 or larger) and outputs the full verified set plus a ready ZIP and copy-paste HTML — free, no account, and your image never leaves your browser. Upload the 512×512 PNG it produces into Shopify, Squarespace, or Wix; in Webflow, use it for both the Favicon and the Webclip fields.

What size and format to upload

The same square image works across all four platforms:

Platform	Setting location	Displayed size	Upload this
Shopify	Online Store → Themes → Customize → Theme settings → Favicon	32×32	512×512 square PNG
Squarespace	Design → Logo & Title / Browser Icon	resized	512×512 square
Wix (premium)	Settings → Website settings → Favicon	resized	512×512 square
Webflow	Project Settings → General → Favicon & Webclip	32×32 + 256×256	32×32 favicon, 256×256 webclip

A few rules that hold everywhere:

• Go square. A rectangular logo gets cropped or squished. Crop to a square or add even padding first.
• Go large. A 512×512 source lets the builder downscale cleanly; a tiny 32×32 upload looks soft when it’s enlarged for home-screen tiles.
• PNG over JPG. PNG keeps transparency where the platform allows it and avoids JPG compression fuzz at small sizes. ICO is unnecessary — the builder handles conversion.
• Simplify the mark. At 32×32 a detailed logo turns to mush. Lean on one bold shape and strong contrast. See favicon sizes & dimensions for the full size chart and how to create a favicon from an image or logo for prepping the square source.

Favicon not updating after you publish?

If the old icon sticks around, it’s almost always caching, not a failed upload:

• Hard-refresh the page (Ctrl/Cmd + Shift + R) and check again in a private/incognito window.
• Wait a few minutes for the platform’s CDN to serve the new file.
• Confirm you saved on the active theme. In Shopify especially, the favicon is per-theme — set it on the live one.
• Check the right field in Webflow and republish; a saved draft won’t update the live site.

Running on WordPress instead of a hosted builder? The flow is different (it’s under Appearance → Customize → Site Identity). See how to add a favicon in WordPress.

Summary

Adding a favicon on a website builder comes down to three steps: open the theme or site settings, upload one square image (512×512 is ideal, 32×32 the minimum), and publish.

• Shopify — Online Store → Themes → Customize → Theme settings → Favicon
• Squarespace — Design → Logo & Title / Browser Icon
• Wix — Settings → Website settings → Favicon (premium plans only)
• Webflow — Project Settings → General → Favicon & Webclip (two fields: 32×32 favicon, 256×256 webclip)

All four generate a limited set from your one upload, which is fine for most sites. If you want the full modern package — SVG, multi-size ICO, opaque Apple touch icon, and a maskable PWA icon — generate it first, then upload the result.

Continue reading:

• How to Add a Favicon in WordPress
• Favicon Sizes & Dimensions: Every Size You Need
• How to Create a Favicon From an Image or Logo
• Favicon Not Showing? How to Check & Fix It