How to Change Favicon on Squarespace
A step-by-step guide to adding a custom favicon (browser icon) to your Squarespace website. Covers versions 7.1 and 7.0, recommended sizes, file formats, dark mode variants, and troubleshooting when your favicon won't appear.
Before you start: create your favicon
You need a favicon file before you can upload it to Squarespace. If you already have one, skip to the instructions below. If not, you can create one in seconds using EasyFavicon — pick an emoji, type a letter, or upload a logo, choose a background, and download a ready-to-use favicon PNG.
- Dimensions: 100×100px to 300×300px. Squarespace recommends this range. A 256×256px PNG is the sweet spot — sharp on high-DPI screens and under the 20KB file size limit.
- Format: PNG or ICO. PNG is preferred for modern sites. ICO is only needed if you must support very old browsers.
- Keep it simple. Favicons display at 16×16px in browser tabs. Complex images and small text become unreadable. A bold icon, letter, or emoji works best.
- Use high contrast. A dark icon on a light background (or vice versa) ensures visibility in both light and dark browser themes.
How to change favicon on Squarespace 7.1
Squarespace 7.1 (the current version used by most sites) has a dedicated Browser Icon panel. The process takes under a minute:
- Open the Design panel. From your Squarespace dashboard, click Design in the Home Menu.
- Select Browser Icon. In the Design panel, click Browser Icon. This opens the favicon uploader. You'll see the current browser icon (a dark cube if you haven't set one yet).
- Upload your favicon. Drag your favicon image into the upload area, or click the uploader to browse your computer. Squarespace accepts PNG and ICO files.
- (Optional) Add a dark mode variant. Below the uploader, toggle “Use a different browser icon in dark mode” if you have a lighter-colored version for dark themes.
- Save. Click Save in the top-left corner. Your new favicon is live.
Quick path:
Home Menu → Design → Browser Icon → Upload image → Save
How to change favicon on Squarespace 7.0
Squarespace 7.0 uses a slightly different menu structure — the favicon setting lives under Logo & Title instead of its own panel:
- Open Design settings. From your Squarespace dashboard, click Design in the Home Menu.
- Go to Logo & Title. Click Logo & Title to open your site's branding settings.
- Scroll to Browser Icon (Favicon). It's located at the bottom of the Logo & Title page.
- Upload your image. Drag and drop your favicon file or click to browse. Acceptable formats are PNG and ICO.
- Save. Click Save to apply the change.
Quick path:
Home Menu → Design → Logo & Title → Browser Icon (Favicon) → Upload → Save
Not sure which version you have? Go to Help in the Home Menu. If you see “Squarespace 7.0” at the bottom, you're on 7.0. If you don't see a version label, you're on 7.1.
Recommended favicon size and format for Squarespace
| Property | Recommendation | Notes |
|---|---|---|
| Dimensions | 100×100px to 300×300px | 256×256px is ideal for Retina displays |
| Format | PNG (preferred) or ICO | PNG supports transparency and is widely supported |
| File size | Under 20KB | Smaller files load faster and avoid upload issues |
| Shape | Square | Non-square images will be cropped |
| Dark mode | Separate variant | Upload a lighter version for dark theme users (7.1 only) |
Troubleshooting: Squarespace favicon not showing
It's common for a new favicon to take a few minutes to appear — and sometimes it feels like it's not working at all. Here are the most common fixes, ordered by how often they solve the problem:
1. Hard-refresh your browser
Your browser caches the old favicon and won't fetch the new one until you force it. Do a hard refresh:
- Chrome / Firefox / Edge: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)
- Safari: Hold Option (⌥) and click the refresh button, or Cmd + Option + R
2. Clear your browser cache
If a hard refresh doesn't work, clear the full cache. In Chrome: go to Settings → Privacy and Security → Clear browsing data → select “Cached images and files” → Clear data. Then reload your site.
3. Rename your favicon file before re-uploading
This is a designer trick that solves ~60% of favicon issues on Squarespace. Rename the file to something new (e.g. favicon-v2.png or browser-icon-2025.png) before uploading. This forces Squarespace to treat it as a new file rather than a replacement.
4. Check the file format and size
Make sure your file is a PNG or ICO, not a JPG, GIF, or SVG. The file should be between 100×100px and 300×300px. If it's larger than 20KB, compress it — Squarespace may silently reject oversized files.
5. Give it time
Squarespace uses a CDN (content delivery network), and favicon changes can take a few hours to propagate globally. Try visiting your site in an incognito/private window or on a different device — you may see the new favicon there before your main browser catches up. Google can take 1–14 days to update favicons in search results.
6. Test on another browser or device
Open your site in a browser you rarely use (Firefox if you normally use Chrome, or vice versa) or on your phone. If the favicon appears there, the issue is a cache problem on your main browser, not a Squarespace problem.
Adding a dark mode favicon variant
With dark mode now used by an estimated 85% of users, having a favicon that looks good on dark backgrounds is important. Squarespace 7.1 supports this natively:
- Go to Design → Browser Icon
- Toggle on “Use a different browser icon in dark mode”
- Upload a lighter or higher-contrast version of your favicon for dark backgrounds
- Click Save
A good rule of thumb: if your main favicon has a dark background, your dark mode variant should have a light or transparent background. If your main favicon is light, darken it for the variant.
Making a Squarespace favicon from scratch
If you don't have a logo or icon ready, you have several options:
- Use an emoji. Pick a bold, simple emoji (🔥, ⚡, ⭐, 🚀), set it on a colored or gradient background, and download as a PNG. Emojis make surprisingly effective favicons — they're universally recognized and render consistently. See the emoji favicon guide for ideas.
- Create a letter mark. Type your brand's initials (1–2 characters), choose from 8 Google Fonts, pick colors, and export. Letter favicons are clean, scalable, and widely used by SaaS companies. See the text favicon guide.
- Convert a logo or image. Upload a PNG, JPG, or SVG of your logo and have it resized to the correct dimensions automatically. The generator crops and fits it into a square favicon.
- Use an SVG. If you have an SVG version of your logo, you can convert it directly to a favicon PNG at the exact size Squarespace needs. See the SVG to favicon guide.
Ready to create your Squarespace favicon? Pick an emoji, type a letter, or upload your logo — all processed in your browser, nothing uploaded to a server.
Generate your Squarespace favicon →Beyond Squarespace: favicons for other platforms
Building a site on a different platform? We have guides for those too:
- How to install a favicon — universal guide covering HTML, Next.js, and WordPress
- Favicon sizes guide — all the dimensions you need for every platform
- What is a favicon? — the complete overview for beginners