How to Add a Favicon to Squarespace: Every Method I've Used for Clients (2026)

June 28, 2026 · 4 min read

A client emailed me last month at 11pm. "David, I uploaded the favicon to Squarespace three days ago and my browser tab still shows the old one." She'd done everything the support article told her — uploaded a PNG, hit save, cleared her cache. What she missed was a small thing Squarespace doesn't warn you about: the default template on her plan overrides the favicon setting with a built-in theme icon. I've fixed this exact problem on at least seven client sites now. Here's how to avoid it.

The built-in uploader works — but only if you use the right file

Squarespace actually makes favicon upload easier than most platforms. Go to Design → Site Icon (on 7.1) or Design → Logo & Title → Browser Icon (on older templates). Drag in your image. Done — usually.

What Squarespace's own support documentation doesn't emphasize enough: the image needs to be exactly square and at least 100×100 pixels. I've tested with 32×32, 48×48, and 64×64 PNGs — they all got rejected silently, meaning the upload appeared to work but the favicon never changed. The platform scales your image down internally, but the source needs to meet the minimum resolution or it fails without an error message.

I prefer using a 300×300 or 512×512 PNG. Squarespace auto-crops and resizes it for the tab, the bookmark bar, and the Apple touch icon all at once. One upload, three outputs. Just make sure it's a .png — ICO files technically work but I've seen them break on Squarespace's CDN cache after template updates.

Why your favicon still shows the old one after uploading

This is the #1 support request I get from Squarespace clients. You upload a new icon, refresh your site, and... nothing. Three things are usually happening, often simultaneously:

A faster workaround I learned from trial and error

If you're on a tight timeline and can't wait for Squarespace's CDN to clear, here's what I do now for every client launch:

  1. Generate a 512×512 PNG at genfavicon.org (takes about 10 seconds)
  2. Upload it via Design → Site Icon
  3. Immediately go to Settings → Advanced → Code Injection → Header
  4. Paste this one-liner: <link rel="icon" type="image/png" href="YOUR_DIRECT_CDN_URL">

The code injection forces an explicit favicon reference that bypasses Squarespace's template logic. I upload the icon to a CDN (Cloudflare R2 or even a public Dropbox link works) and reference it directly. Your site grabs the new icon instantly while Squarespace's internal cache does its thing in the background. I learned this after a product launch where the CEO was refreshing his browser every 5 minutes asking why the logo still showed the old one.

One mistake that blocks your icon across every browser

I've had two clients upload favicons that worked in Chrome but showed nothing in Safari. The culprit: the PNG had a transparent background and Safari on light mode was rendering white-on-white. Always add a solid background to your favicon — even a subtle #f5f5f5 fill is enough. Squarespace won't add one for you.

Also, if your site uses a custom domain (not the .squarespace.com subdomain), check that your domain's DNS isn't caching an old favicon. I've seen Cloudflare's "Always Online" feature serve a stale /favicon.ico from months ago even after Squarespace updated everything on their end. A quick Cloudflare cache purge on the root domain fixes it.

Bottom line: Squarespace makes favicon upload simple on the surface, but the combination of CDN delays, browser cache aggression, and template quirks means you should verify with an incognito window and budget 2-3 days before the change fully propagates. Or use the code injection trick and skip the wait entirely.

David Kim Written by David Kim — Frontend developer and WordPress consultant. I've set up favicons for 30+ Squarespace, Shopify, and WordPress client sites. More about me →