How to Change Your Squarespace Favicon

Overview

Your favicon is the tiny square in the browser tab that does a lot of branding work. In a sea of tabs, it’s your quick signature. If you’ve been meaning to change favicon Squarespace, this guide will help you add a crisp, on‑brand icon that looks clean on every device and in every browser.

A strong favicon sits alongside your typography and color as part of your visual system. If you’re updating brand elements, it’s a good moment to review your type too—see our guide on changing fonts in Squarespace: set consistent brand fonts across your site.

Squarespace makes the upload simple, but two things often trip people up: picking the right sizes/formats and dealing with caching. We’ll cover both, plus quick troubleshooting for favicon not showing Squarespace scenarios. For reference, Squarespace’s own steps are here: Upload a browser icon (favicon), and MDN’s overview of favicons is here: Favicon basics.

Swap favicon assets instantly with MicroEdits

If you just want the new icon live without poking around menus, MicroEdits is the fast lane. Describe what you want in plain English—replace our favicon with this new PNG—and it updates your existing Squarespace site. No code. No theme hunting. You can preview across pages, share the draft link, and revert in a click if it’s not quite right.

Because MicroEdits applies changes instantly to your live site, it’s perfect for quick branding refreshes and cache-busting swaps when your favicon just won’t update.

enter any Squarespace site

Prepare the file

A good favicon is simple, high‑contrast, and square. Aim for a bold shape that holds up at 16–32 pixels.

Recommended formats and sizes

Format	Best for	Suggested sizes	Notes
PNG	Most common, transparent backgrounds	16×16, 32×32, 48×48, 180×180	Clean edges, alpha transparency; great default.
ICO	Legacy/Windows compatibility	Multi-size (16/32/48) in one file	Optional if you want maximum backward compatibility.
SVG	Crisp at any scale	Vector (no set pixel size)	Widely supported; keep a PNG fallback for older setups. See MDN: link rel=“icon”.

Tip: Squarespace will generate derivatives from your upload, but starting with a tidy set improves results, especially on high‑DPI displays.

Quick export checklist

Square artboard. 1:1 aspect ratio.
High contrast. Bold shapes; avoid thin hairlines.
Padding. Add a small margin so the icon doesn’t touch the edges.
Multiple sizes. Export at 32×32 and 48×48 PNG; include 180×180 for Apple touch.
Small file size. Keep each PNG under ~200 KB.
Dark mode test. View on dark browser UI; add a subtle stroke or shape if it disappears.

If you want advanced styling like a Safari pinned-tab outline later, you can add custom header code via Squarespace; see our primer on adding custom CSS and header tags responsibly.

Upload in Site Settings

Squarespace 7.1 and 7.0 both support a site‑wide favicon upload (called “Browser Icon” in some menus).

Open your site and log in.
Go to Design → Browser Icon (or Design → Logo & Title in some templates).
Upload your PNG/SVG/ICO file.
Save and then refresh your site.
Check a few pages and your 404 page to confirm consistency.

If menu labels differ in your template, follow Squarespace’s doc: Upload a browser icon.

Clear caches and fallbacks

Favicons are aggressively cached by browsers, CDNs, and even operating systems. Here’s how to verify your change and nudge caches to update:

Use a private window. Open your site in an incognito/private window to bypass some caches.
Hard refresh. On desktop: Shift + Refresh (or Cmd/Ctrl + Shift + R).
Rename the file. Re‑upload the favicon with a new filename (e.g., brand-favicon-2025.png) to force a new URL.
Wait for CDN propagation. Give it 5–15 minutes, sometimes longer.
Mobile home screen. If you’ve saved your site to a home screen, delete the old shortcut and re‑add it.
Search appearance. Google caches favicons for Search separately; updates can take time. See Google’s favicon guidance.

Troubleshooting

Start simple and move outward.

Format → Size → Cache.
- Format. PNG is the safest default. If SVG isn’t rendering, switch to PNG.
- Size. Ensure it’s square. Export 32×32 and 48×48 PNGs plus 180×180.
- Cache. Private window, hard refresh, and rename the file on re‑upload.
Blurry or soft icon.
- Simplify the artwork. Remove tiny details.
- Export at 32×32 and 48×48 so high‑DPI displays look crisp.
- Add 1–2 px padding; avoid edge‑to‑edge shapes.
Dark mode vanishing act.
- Add a light outline or a contrasting badge shape.
- Test in a dark‑themed browser UI.
Favicon not showing Squarespace at all.
- Confirm it’s uploaded under Design → Browser Icon and you pressed Save.
- Try PNG 32×32. Re‑upload with a new filename.
- Check your site from a different device/network.
iOS/Android home screen looks wrong.
- Include a clean 180×180 PNG in your upload set.
- Remove the old home screen shortcut and add it again after the update.

Need per‑page or advanced icons.

Use Page Settings → Advanced → Header to add page‑specific tags. Example:

<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />

Keep it minimal to avoid conflicts with the site‑wide setting.

FAQ

Can I use SVG for my Squarespace favicon?

Yes—modern browsers support SVG favicons, but support isn’t universal. If Squarespace accepts your SVG and you still don’t see it everywhere, upload a PNG fallback (32×32 and 48×48). PNG remains the most reliable choice across platforms. For the widest compatibility, keep both available and let browsers choose the best option.

What’s the best Squarespace favicon size?

Use square PNGs at 32×32 and 48×48 for tabs, plus 180×180 for mobile home screens. You can also include a multi‑size ICO (16/32/48) for legacy browsers. Keep lines bold and add a small margin. If you only upload one asset, a 32×32 PNG is a safe baseline, but pairing it with 48×48 and 180×180 improves clarity.

Why is my favicon not showing in Squarespace?

It’s usually caching. Open your site in a private window, hard refresh, and wait a few minutes. Re‑upload the icon with a new filename to force cache busting. Also check that you uploaded under Design → Browser Icon and pressed Save. If you used SVG, try a PNG version to eliminate format quirks.

How long do favicon updates take to appear?

On your own browser, it can be immediate after a hard refresh. Across other devices and cached networks, expect 5–15 minutes, occasionally longer. Search engines cache favicons separately and may take hours or days to reflect changes. Rename the file when you re‑upload to accelerate updates.

Can I set different favicons per page?

Squarespace sets one global favicon per site by default. For special cases (e.g., a sub‑brand landing page), add page‑specific link rel=“icon” tags via that page’s Advanced → Header area. Keep the site‑wide favicon in place as a fallback so browsers without page‑level overrides still display your icon.

How do I make my favicon work in dark mode?

Ensure contrast. Add a light stroke or a simple badge behind dark artwork so it doesn’t disappear against dark browser chrome. Test on a dark‑themed window and on mobile. If the icon still feels muddy, simplify the shape—fewer details, bigger forms. The cleanest favicons survive at 16×16.