How to change the favicon on Squarespace: open the Favicon panel (in the Home menu click Settings, then Website, then Favicon; the route is the same on 7.1 and 7.0), drag in a square PNG between 100 and 300 pixels under 100 KB, and click Save. Then hard-refresh your browser, because browsers cling to the old icon longer than anything else on a site. That is the two-minute job. The parts people get wrong are the file itself, the dark-mode version, and why the icon shows in the tab but not in Google’s results, so those are covered below.
What size and format does a Squarespace favicon need?
Squarespace’s favicon guide is specific, and most of the “my favicon looks blurry” complaints come from ignoring one of these lines:
| Requirement | Value | Why it matters |
|---|---|---|
| Format | PNG (Squarespace will not accept .ico) | PNG keeps transparency; JPG gives you a white box in dark tabs |
| Dimensions | Square, 100 x 100 to 300 x 300 px | Browsers scale it down to 16 x 16, so anything over 300 gains nothing |
| File size | Under 100 KB | The uploader rejects anything larger |
| Shape of the artwork | One simple mark, no words | At 16 pixels, text is a smudge; a single letter or symbol survives |
| For Google results | A multiple of 48 px (48, 96, 144, 192) | Google only shows favicons in search results if they meet its own rules, not Squarespace’s |
The last row is the one nobody tells you. Upload a 300 x 300 file and the tab icon is fine, but Google’s result pages want 48-pixel multiples. A 192 x 192 PNG satisfies both, so that is the size to export.
How do you change the favicon on Squarespace?
- Log in and open the Home menu.
- Click Settings, then Website.
- Click Favicon.
- Drag your PNG into the uploader, or click it to choose the file.
- Optional: add a dark mode version. Browsers in dark mode will use it instead of the default. You can only add this after a default favicon exists.
- Click Save.
The same panel serves version 7.0 sites. If you are not sure which version you are on, the Squarespace tips post explains why 7.1 is worth the move for more than favicons.
How do you make a favicon that still looks sharp at 16 pixels?
Start from your logo, then throw most of it away. A wordmark does not survive; a monogram, an initial or the symbol part of your logo does. In Canva, create a custom-size design at 192 x 192, place the mark so it fills about 80 percent of the square, set the background to transparent (or to your brand colour if the mark is light), and download as PNG with the transparent background box ticked. Check it at actual size before uploading: zoom your browser out until the design is the size of a tab icon. If you cannot tell what it is, simplify it again.
Light icon on a transparent background is the usual trap: it disappears in a light-mode tab. Either give it a coloured background, or upload that version as the dark-mode favicon and a dark version as the default.
Why is the new favicon not showing?
| What you see | Cause | Fix |
|---|---|---|
| Old icon still in the tab | Browser cache. Favicons are cached separately and aggressively | Hard refresh (Cmd or Ctrl + Shift + R), then clear the browser cache, then restart the browser |
| Squarespace cube still showing | Upload did not save, or you are looking at a different site in the account | Reopen the Favicon panel and confirm the image is there; check the site name in the Home menu |
| Works on desktop, missing on phone | Normal. Most mobile browsers do not display favicons in tabs | Nothing to fix; it will show in bookmarks and home-screen shortcuts |
| Safari shows a border or grey box | Safari adds contrast to light or transparent icons | Use a coloured background, or supply a dark-mode version |
| Fine in the tab, missing in Google results | Icon not a 48 px multiple, or Google has not recrawled the home page | Re-export at 192 x 192, then request indexing for the home page in Search Console and wait; it can take weeks |
Does the favicon affect SEO?
Not rankings, but it does affect clicks. Google shows the favicon next to your site name in mobile results and increasingly on desktop, so a site with the default Squarespace cube looks like a template beside competitors with a real mark. It is one of the small trust signals, along with a proper social sharing image and page titles that are actually written, that a Squarespace website designer sets on launch day. If you are ticking these boxes on your own site, the favicon is a five-minute item; do it once, at 192 pixels, and forget it.
Frequently asked questions
Open the Home menu, click Settings, then Website, then Favicon. Upload a PNG and save. The route is the same on 7.1 and 7.0.
A square PNG between 100 x 100 and 300 x 300 pixels, under 100 KB. Use 192 x 192 so it also meets Google’s rule that search-result favicons are a multiple of 48 pixels.
No. Squarespace accepts PNG only. Convert an existing .ico with a free tool such as favicon.io and export it as a 192 x 192 PNG.
Browser caching. Favicons are held longer than page content. Hard refresh, clear the cache and restart the browser; if it still shows the old icon, reopen the Favicon panel and confirm the new file saved.
Yes. In the Favicon panel, after adding the default icon, upload an alternate version for dark mode. It is used automatically when the visitor’s browser is in dark mode.
Google applies its own rules: a square icon that is a multiple of 48 pixels, reachable on a crawlable home page. Re-export at 192 x 192, request indexing for the home page, and allow a few weeks.
