Favicon ToolsVerifyBuild
No-code

Squarespace Favicon Generator

Squarespace calls the favicon a browser icon, and it is one square image uploaded in the site's settings. There is no file system and no template to edit, so that single upload is most of what you get.

Generate the icon setCheck an existing site

One upload, no files

You upload a square image and Squarespace serves a resized copy from its own image CDN, writing the link tag into every page for you. Nothing about this is a file you own or a path you control, which removes most of the ways a favicon usually breaks.

It also removes the options. Anything beyond the browser tab icon — an iOS home screen icon, a web app manifest — is not exposed as a setting, and reaching it means header code injection, which is only available on some plans.

Setting the browser icon

  1. 1

    Find the browser icon setting

    It lives in the site's design settings and has moved between versions of the interface. Searching the admin for 'browser icon' is more reliable than following a menu path from an old tutorial, and the field is sometimes labelled favicon.

  2. 2

    Upload a square image

    A square PNG a few hundred pixels on a side is the safe choice — Squarespace resizes down from what you give it. Anything not square gets cropped, and the crop is not something you get to choose.

  3. 3

    Save and check the live site

    Look at the published site in a private window rather than in the editor. The editor holds on to the previous icon, and the browser caches favicons separately from pages, so a normal refresh often shows the old one.

What the image has to survive

Example favicon at 16 by 16 pixels
16px
Example favicon at 32 by 32 pixels
32px
Example favicon at 48 by 48 pixels
48px
Example favicon at 96 by 96 pixels
96px
Example favicon at 180 by 180 pixels
180px
Rendered at true pixel dimensions. You upload one file and the platform resizes it, so the design has to hold up at 16px without any per-size tuning.

Browser icon setting vs code injection

Browser icon upload

Start here

The supported route

  • One square image, no code, available on every plan
  • Covers the browser tab and bookmarks
  • Squarespace serves and resizes the file for you
  • Survives template and design changes

Header code injection

Only if you need more

  • Requires a plan tier that includes code injection
  • Lets you add apple-touch-icon and manifest links
  • The files still have to be hosted somewhere reachable
  • Nothing validates it — a typo just silently does nothing

Squarespace favicon FAQ

I changed the browser icon and the tab still shows the old one.

Check the published site in a private window first. If it is correct there, you are looking at your own browser's favicon cache, which ignores a normal refresh. If it is wrong there too, confirm the upload actually saved rather than sitting in an unsaved editor session.

What size and format should I upload?

A square PNG, a few hundred pixels on each side. The platform generates what it serves from that one file, so there is no benefit to hand-tuning small versions — go for a mark with enough contrast to read at 16px.

How do I get an icon on the iOS home screen?

That needs an apple-touch-icon link, which is not one of the settings. It has to go in via header code injection, pointing at an image you have uploaded to the site. Without it, iOS uses a screenshot of the page instead.

Related platforms

WixWordPressShopify