Add a favicon to Shopify, Wix or Squarespace

9 min read

Hosted website builders trade control for convenience, and favicons show the trade clearly. Shopify, Wix and Squarespace will all happily display your icon in a browser tab — each through its own settings screen, each with its own limits, and none of them giving you the full <head> control you would have on a self-hosted site. This guide walks through where each favicon setting lives, what image to prepare so all three platforms render it well, what you cannot fix from inside a builder, and how to verify the result on the live site. Treat the menu paths and plan requirements below as current-at-writing starting points, not guarantees — dashboards, labels and plan rules were not identical across every account and change without notice, so if a label differs on yours, search the settings (and the platform's help centre) for "favicon" before assuming a step is wrong.

Prepare one image that works on all three

Whatever builder you use, the upload starts from the same artwork. Get this right once and every platform below renders it as well as it is capable of:

  • A square master, at least 512×512 pixels. Builders generate their small sizes from your upload. A large square source downscales cleanly to the 32-pixel tab icon and to any larger touch or sharing size the platform derives; a small upload can only be blurred upward.
  • The symbol, not the lockup. Your full logo — symbol plus wordmark — is designed to be read at the top of a page. At favicon size only the symbol or a monogram survives. Export a favicon-specific version rather than shrinking the header logo.
  • An opaque, deliberate background. Builders typically derive one image for every surface, including places that fill transparency unpredictably. A brand-coloured background with the mark centred on it looks intentional in tabs, bookmarks and home-screen shortcuts alike; a transparent floating mark is at the mercy of whatever sits behind it.
  • Margins inside the square. Platforms crop and mask home-screen icons into rounded squares and circles. Keep the essential artwork inside roughly the central 80% of the canvas so no mask trims it — the same safe-zone thinking behind maskable Android icons, applied to artwork you do not fully control the display of.
  • A design that reads at 16 pixels. Preview the upload shrunk to tab size. Bold shapes and one or two colours survive; fine lines, gradients with low contrast and small text do not, on any platform.

Drop that master into the favicon generator first if you want to see it in browser tabs, Google results and on phone home screens before uploading, or start from nothing with the logo maker and export the same design as your builder upload and your downloadable package.

Shopify: Theme settings → Favicon

  1. In your Shopify admin, go to Online Store → Themes and choose Customize on the theme you want to change.
  2. In the theme editor, open Theme settings (the gear icon) and find the Favicon section — in some themes it sits under a "Logo" or "Brand" grouping.
  3. Select or upload your image. Shopify generally asks for a square image and scales your upload down to the small sizes it serves, commonly displayed at 32×32 in tabs — check Shopify's current help page for its exact recommended dimensions.
  4. Save, then open your storefront in a private window and check the tab.

What Shopify gives you is a correct, declared browser favicon with no code — exactly what a shop owner should have to think about, and no more. What it generally does not give you through that setting: a separate SVG favicon, a dark-mode variant or a web app manifest with maskable icons, and the theme editor's favicon is typically a single raster image for every surface. Stores whose plan and theme allow editing theme code may be able to add the complete package manually — upload the generated files to the theme's assets or the Files area and add the <link> tags to theme.liquid — but treat that as a developer task: note the generated markup expects stable root paths, while Shopify serves theme assets from its CDN, so every href and the manifest's internal icon paths must point at the real uploaded URLs. If that paragraph is not for you, the built-in favicon plus a strong opaque design is a perfectly good place to stop.

Wix: Settings → Favicon (usually a paid plan)

  1. In your site's dashboard, open Settings and look for Favicon under the website settings — in the newer editor the path runs through Settings → Website settings or the marketing and SEO area, depending on your dashboard version.
  2. Choose Upload favicon (or Change favicon if one exists) and upload your square image.
  3. Publish the site — on Wix, settings changes generally do not reach visitors until you publish.

The catch to know before you start: Wix has generally required a paid (Premium) plan for a custom favicon — confirm the rule on your own plan, as packaging changes. If your site is on a free plan, expect the upload to be unavailable and your pages to carry the Wix default icon, which advertises the platform rather than your brand — for many small sites this is honestly one of the more visible reasons to upgrade. Within the paid setting, Wix serves your single uploaded image as the favicon across surfaces. As with Shopify, there is no native SVG, dark-variant or manifest control; some plans allow custom code in the site's head through the settings or developer tools, and the full package can be added there by someone comfortable maintaining it, with icon files hosted at stable URLs first. Everyone else should invest their effort in the artwork: one opaque, high-contrast, well-margined square is what Wix will show everywhere, so make that one image count.

Squarespace: Settings → Website → Favicon

  1. In your Squarespace dashboard, open Settings → Website and find Favicon (on some versions it appears under a "Browser icon" label).
  2. Upload your square image — Squarespace typically asks for a square file and generates the display sizes from it; check its current help page if the uploader specifies different limits.
  3. Save, then check the live site in a private window. Squarespace also uses uploaded brand imagery elsewhere, so confirm the favicon specifically rather than assuming the logo setting covered it.

Squarespace's approach matches the other builders: one image, served everywhere, no code required. Its defaults are tasteful and the icon will look clean in tabs — provided the artwork itself is bold enough at small sizes. The same ceilings apply: no separate SVG favicon, no dark-mode variant, no maskable manifest icons from the settings screen. Squarespace's code-injection features (plan-dependent) can add the generated <link> tags to the site header, with the icon files uploaded to stable URLs — again a developer-flavoured option, and one to re-check after any template change. The pragmatic Squarespace setup is an excellent built-in favicon now, and the full package only if install-to-home-screen traffic actually matters to your audience.

What no builder setting can give you — and whether to care

It helps to name exactly what the single-image approach leaves out, so you can decide with open eyes rather than discover it phone by phone:

  • SVG sharpness and dark mode. Desktop browsers prefer an SVG favicon, and only an SVG can swap designs for dark tabs via prefers-color-scheme. A builder's fixed raster must survive both themes on its own — another argument for giving your upload its own opaque background instead of transparency. The mechanics are in our SVG dark-mode guide.
  • A designed Apple Touch Icon. iOS home-screen shortcuts want an opaque 180×180 PNG. Builders derive something serviceable from your upload when a visitor adds the site to a home screen, but you do not control the padding or background treatment beyond what is already in your square.
  • Maskable Android icons. A manifest-declared 192×192 and 512×512 pair, with the artwork inside the 80% safe zone, is what keeps Android launchers from cropping your logo. Builders that do not let you ship a manifest leave this to their defaults.
  • The root /favicon.ico convention. Tools that request /favicon.ico without reading your pages — some readers, link unfurlers and browsers showing a PDF — depend on hosting you do not control on a builder. Declared icons cover browsers and search engines, which is where nearly all impressions happen.

For most shops, portfolios and restaurant sites, the built-in icon is 90% of the value for 2% of the effort. Graduate to code-level installation when your analytics show meaningful home-screen or installed-app traffic, or when your brand regularly appears in dark browser tabs and the fixed icon visibly fails there. For why SVG, PNG and ICO each have a separate job in that full package, see PNG vs ICO vs SVG; if you later move to self-hosted WordPress, the WordPress favicon guide covers both its Site Icon and the full package, and a site with no finished logo can start from a text or emoji favicon in the meantime.

Check the result like a visitor

Whichever platform you are on, finish with the same verification. Open the live site in a private window (builders and browsers both cache favicons hard, and the dashboard preview is not proof). Run the domain through the favicon checker to see which icons are actually declared, at what sizes, and how they preview in tabs and Google results — Google, remember, wants a square icon in a supported raster format (PNG or ICO, for instance), at least 8x8 and ideally larger than 48x48 pixels, on a stable, crawlable URL, and refreshes its copy over days, as the Google favicon FAQ summarises. Add the site to a phone home screen and look at what your customers will actually tap. And if the old icon lingers after a change, work through the cache layers before re-uploading: our favicon not showing up guide is written for exactly that afternoon.

Quick questions

What image size should I upload to a builder?

A square of at least 512×512 pixels where the platform accepts it. Every builder downscales; none can add detail your upload lacks. Keep the mark inside the central area with an opaque background.

Can I upload my SVG logo as the favicon on Shopify, Wix or Squarespace?

Expect to upload a raster (PNG) image. The builders' favicon settings are built around a single picture they resize themselves; SVG favicon support belongs to the code-level installation described above.

Why does my site still show the platform's icon?

On Wix, check whether your current plan allows a custom favicon and that you published after uploading. Everywhere: clear the cache layers, test in a private window, and confirm you changed the favicon setting itself — several builders keep logo, social-sharing image and favicon as three separate uploads.

Is the built-in favicon enough for Google search results?

Usually, yes: Google needs a crawlable, stable, square icon — a supported raster format such as PNG or ICO, ideally larger than 48x48 pixels — declared on the home page. A builder's declared icon normally qualifies; verify with the checker and allow days for Google to refresh it.

The short version

Prepare one bold, opaque, well-margined square of at least 512×512. Shopify: theme editor, Theme settings, Favicon. Wix: Settings, Favicon, usually on a paid plan, then publish. Squarespace: Settings, Website, Favicon. (Labels and plan rules change — if yours differ, your platform's current help page wins.) Accept that SVG, dark-mode and manifest control need code access the builders reserve for developer routes, verify on the live site with the favicon checker and a real phone — and generate the full package here for the day you move to a stack that lets you ship it.

All favicon articles