How to Add a Favicon on Squarespace

Squarespace's favicon (browser icon) setting is a single panel Squarespace calls "the Favicon panel," reached from Settings, and it accepts a square PNG, JPG or GIF between 100px and 300px on a side and under 100 KB — if a new icon doesn't appear right away, that's almost always a caching issue in your browser, not a failed upload. Here's the exact panel, the size and format Squarespace recommends, and what to do when the new icon doesn't show.

Where do I find the favicon setting?

Squarespace's current help article gives one instruction: "Open the Favicon panel," and links it directly to a Settings destination (Squarespace, "Add a favicon or browser icon", checked September 2026). On a 7.1 site, that panel sits under Settings → Website → Favicon. Once you're there, the steps are simple:

1. Open the Favicon panel.
2. Drag your image into the image uploader, or click it to choose a file from your computer.
3. Optional: add a second, alternate version of the favicon for visitors browsing your site in dark mode. Squarespace notes you can't add a dark-mode version without a default one already in place.
4. Click Save.

What if my site is still on Squarespace 7.0?

Squarespace runs two different editing systems side by side, and its help center is explicit that they're organized differently at the settings level: "On version 7.1, the site title and logo display is set by your site's header layout... On version 7.0, the site title and logo display is set by your site's template" (Squarespace, "Site title and logo display") (Squarespace, "Site title and logo display", checked September 2026). That's the same Design-versus-Settings split that runs through the rest of 7.0: site-level appearance controls generally live under the Design panel and are scoped to your specific template, rather than the site-wide Settings area 7.1 uses.

Squarespace's current favicon article itself doesn't publish a separate 7.0 walkthrough — it documents the 7.1 Settings path only. If you're not sure which version your site runs, check your site's Design menu: a 7.0 site organizes appearance settings by template inside Design, while a 7.1 site keeps them under Settings. Either way, the image requirements below are the same regardless of version, since they're a property of the favicon file itself, not the editor.

What image size and format does Squarespace recommend?

Straight from Squarespace's own guidance:

• Resolution: "Though they display at 16px x 16px, favicons work best across browsers when uploaded between 100px x 100px and 300px x 300px."
• Format: "We recommend .png files. It's not possible to upload an .icon file." (JPG and GIF also upload through the same panel, per the uploader's accepted formats, but Squarespace's own recommendation is PNG.)
• File size: "Favicon image files can't be more than 100 KB."
• Multi-version files: not supported — Squarespace states plainly, "It's not currently possible to use multi-version favicons," so remove any embedded alternate sizes and upload a single flat image.

If you're designing the icon itself rather than just uploading a file you already have, our guide to building a favicon from a Figma design covers frame size, simplifying a detailed logo for a 16px tab icon, and the plugins that generate the actual files.

Why doesn't my new favicon show up right away?

This is the single most common favicon complaint, and Squarespace's own troubleshooting answer is short: "If your favicon doesn't update right away, we recommend clearing your browser cache and restarting your browser. Browsers can be very persistent in holding on to cached favicons." In practice, that means:

• Hard-refresh or clear cache in the browser you're checking with.
• Restart the browser entirely — a refresh alone sometimes isn't enough, since browsers cache favicons more aggressively than page content.
• Check in a private/incognito window, which starts with no cached favicon at all, as an easy way to confirm whether the new upload actually saved.
• Give it some time on mobile — Squarespace notes that "usually, the favicon doesn't display on mobile browsers" at all, so don't use a phone's tab bar as your test.

If the icon still doesn't change after clearing cache and checking in a private window, re-open the Favicon panel and confirm the upload actually saved — a failed save (wrong file type, over the 100 KB limit) will silently leave the old icon in place rather than showing an error on some connections.

What if I never add one?

Squarespace's default answer: "All Squarespace sites start with our default cube favicon. If you don't add your own favicon, people who know the icon will recognize that you're part of the Squarespace community." It's a real, working icon either way — adding your own is about brand recognition in a browser full of tabs, not fixing something broken.

Does a custom favicon help in search results too?

Sometimes, separately from the browser-tab use case. Squarespace's article notes that "some search engines may display your favicon when your site appears in search results, but different search engines have different requirements," and gives Google's own sizing rule as the example: Google "requires that your favicon be a multiple of 48px x 48px, like 48px x 48px, 96px x 96px, 144px x 144px and so on." If you want that specific behavior, check the search engine's own favicon requirements against what you upload — the same 100-300px square PNG that works for the browser tab is not guaranteed to satisfy every search engine's separate multiple-of-48px rule. Squarespace's own SEO checklist guide covers the other on-page settings worth checking alongside this one.

Where does Figment fit in?

Not directly for a Squarespace site — this guide is about Squarespace's own Favicon panel, and Figment doesn't touch Squarespace's settings. If you're instead publishing a new site from a Figma design through Figment's Figma plugin, Figment has its own single-image Favicon upload field in Website Settings, which is a different, simpler flow covered in the Figma-favicon guide linked above.

Bottom line: on a current Squarespace 7.1 site, the favicon panel lives at Settings → Website → Favicon; upload a square PNG between 100px and 300px under 100 KB, skip multi-version files, and if the new icon doesn't appear, clear your browser cache and check again in a private window before assuming the upload failed.