Squarespace ships every site with a default favicon. It works — but it also makes your tab look like every other Squarespace site in a crowded browser window.
This guide shows you exactly how to change favicon in Squarespace (Squarespace 7.1 and 7.0), what file you should upload, how to add a dark mode favicon, and what to do when the icon “doesn’t update” (hint: it’s usually caching).
Official reference (Squarespace): Adding a favicon or browser icon
Quick steps (most people only need this)
- Create a square PNG favicon (recommendation: 200×200 or 256×256, under 100 KB).
- In Squarespace, open Settings → Favicon (Squarespace 7.1) or Design → Logo & Title → Browser Icon (Squarespace 7.0).
- Upload the image and Save.
- If it doesn’t update, jump to: Favicon not updating in Squarespace.
If you want a favicon that’s crisp everywhere (tabs + iOS + installs), generate a full icon pack first, then choose the favicon file from it:
- Generate icons: Favicon Generator
- Audit what’s live: Favicon Checker
Squarespace favicon requirements (file type, size, limits)
Squarespace’s favicon feature is intentionally simple. The tradeoff is: you upload one image, and Squarespace handles the rest.
Here’s the checklist:
| Requirement | What to do | Why it matters |
|---|---|---|
| Format | Use PNG | Squarespace’s favicon uploader is designed around PNG; ICO support is inconsistent across builders. |
| Dimensions | Upload 100×100 to 300×300 (sweet spot: 200–256) | Browsers display it tiny (often 16×16), but a higher-res source scales down better. |
| File size | Keep it < 100 KB | Prevents upload issues and avoids slow icon fetches on first load. |
| Multiple versions | Upload one favicon image | Multi-size “ICO packs” aren’t how Squarespace’s built-in favicon upload works. |
| Dark mode | Optional: add a dark mode favicon | Helps your icon stay visible on dark tabs / UI. |
A favicon is usually rendered around 16×16 in the tab, even if you upload a larger file. The goal is clarity at “micro size”: bold shapes, high contrast, minimal detail.
How to change favicon in Squarespace 7.1 (current UI)
Squarespace 7.1 moved a lot of branding settings into the site-wide Settings area. The favicon lives there too.
- Open your Squarespace dashboard and select your site.
- Go to Settings.
- Select Favicon.
- Upload your PNG.
- Click Save.
Add a dark mode favicon (recommended)
If your favicon is dark (black text, dark logo mark), it can disappear against a dark browser UI. Squarespace supports a separate icon for dark mode:
- Upload your standard favicon first.
- Add the dark mode version (usually a light/white mark on transparent background).
- Save.
Design tip: keep the two versions the same shape (only invert colors). If the icon changes shape, it can look like the tab is “flickering” between brands.
How to change favicon in Squarespace 7.0
Squarespace 7.0 keeps favicon settings inside Design.
- Open your Squarespace dashboard and select your site.
- Go to Design.
- Select Logo & Title.
- Scroll to Browser Icon.
- Upload your PNG and Save.
If your sidebar doesn’t match these labels exactly (Squarespace tweaks wording), search your dashboard for “favicon” or “browser icon”.
Favicon not updating in Squarespace (fix it fast)
Browsers, CDNs, and sometimes your OS all cache favicons hard. You can replace the file on the server and still see the old icon for hours.
Try these in order:
- Hard refresh (Ctrl/Cmd + Shift + R) and then open your site in a Private/Incognito window.
- Open the favicon URL directly in a new tab (Squarespace often serves the favicon at a stable URL; the direct URL is the best “is it live?” check).
- Clear the browser’s favicon cache or restart the browser (yes, really).
- If you use a custom domain behind a CDN/proxy, purge cache at the CDN layer.
If you want a checklist that works across hosts and browsers, follow: Favicon not showing.
How to verify your Squarespace favicon is actually live
The fastest verification loop:
- Publish your Squarespace site (favicon changes won’t matter if you’re only viewing editor previews).
- Run Favicon Checker on your live URL.
- Confirm:
- The favicon URL returns
200 - The response is an image (not HTML)
- Your
<head>has a valid icon reference
- The favicon URL returns
If you see text/html for the favicon URL, something is rewriting the path — that’s uncommon on Squarespace, but it can happen with domain proxies or custom edge setups.
(Optional) Want more than “just a favicon” on Squarespace?
Squarespace’s built-in favicon is enough for browser tabs. But modern sites often ship an icon “pack”:
apple-touch-icon.png(iOS home screen)site.webmanifest(PWA installs)- Multiple PNG sizes (16/32/192/512)
If your plan includes Code Injection, you can add additional <link rel="icon"> tags to your site’s <head> — but you’ll also need to host those icon files somewhere public (and keep their URLs stable).
If you go down this route, generate the pack first (so you don’t miss a size): Favicon Generator.
Video: Squarespace favicon walkthrough
FAQ
What size favicon should I use for Squarespace?
Upload a square PNG between 100×100 and 300×300. If you want one number: 256×256 is a safe default (then let Squarespace scale it down).
Can I upload an ICO file to Squarespace?
Squarespace’s favicon UI is built around uploading an image (typically PNG). If you want maximum compatibility, prefer PNG for Squarespace and keep ICO for self-hosted sites where you control the full favicon stack.
Why doesn’t my favicon show on mobile?
Most mobile browsers don’t show favicons in the same way desktop tabs do. For mobile “home screen” icons, you generally need an Apple touch icon and/or a web manifest — which is separate from the favicon.
How long does it take for Google to show my Squarespace favicon in search results?
There’s no fixed time. Even if you follow guidelines, Google may take days to weeks to recrawl, and it’s not guaranteed to display a favicon for every site.
Next steps
- Generate a crisp favicon (and optionally a full pack): Favicon Generator
- Validate your live icon URLs: Favicon Checker
- Debug stubborn caching: Favicon not showing
Helpful external links
- Squarespace help: Adding a favicon or browser icon
- Google favicon guidelines (search results): Define a favicon to show in search results
