How to Update Your Favicon in Squarespace
Update your Squarespace favicon (browser icon): prepare a clean square export from your vector logo, upload it, save, and confirm the change past browser caching.
Contents
Short answer: Squarespace calls the favicon a "browser icon." To update it, open your site editor, find the browser icon setting, upload a new image prepared from your logo, and save. Then check the result in a fresh browser session, because browsers often keep showing the old icon for a while. A favicon is the small image that appears in browser tabs, bookmarks and history lists next to your page title.
The exact menu path depends on your Squarespace version (7.0 or 7.1) and on how Squarespace has organized its editor at the time you log in. This guide does not have a confirmed current menu path, so the most reliable route is to type "browser icon" into the editor's search or check Squarespace's own help center for your version.
Terms You Need for This Task
- Vector artwork: a logo built from mathematical paths and shapes rather than pixels, so it can be scaled to any size without losing sharpness. Common working formats include SVG, AI and EPS.
- Raster image: an image made of a fixed grid of pixels, such as PNG or ICO. Browsers display favicons at very small pixel sizes, so the upload is usually a raster export of your vector master.
- Artboard: the canvas area in a vector editor that defines the exported image's boundaries. For a favicon, a square artboard keeps the icon from being stretched or cropped unpredictably.
- Export: producing a delivery file (for example, a PNG) from your editable vector source file.
Prepare the Icon From Your Vector Logo
A full logo with a wordmark and fine details rarely reads well at favicon scale. The following are design recommendations, not Squarespace requirements:
- Use a simplified mark: a symbol, monogram or single initial from your logo usually works better than the complete lockup.
- Place it on a square artboard and center it, leaving a small, even margin so the shape isn't clipped.
- Check thin strokes and small gaps by zooming out to a tiny preview; thicken or remove details that disappear.
- Decide on the background: a transparent background lets the icon sit on light or dark browser tabs, but test that the mark stays visible on both. If it doesn't, use a solid background shape.
- Keep your vector file as the master and export a raster copy for upload. If you need a different size later, export again from the vector rather than resizing the raster file.
File formats and sizes: no confirmed Squarespace upload specifications (accepted formats, recommended pixel dimensions or file-size limits) were available for this guide. Check the current requirements in Squarespace's help documentation before exporting. Likewise, do not assume SVG uploads are accepted for the browser icon unless Squarespace documents it; exporting a PNG from your SVG master is the safer default.
Two cautions about source files: a .svg or .ai extension does not prove a file contains clean, editable vector paths (it may wrap an embedded pixel image), and having a logo file does not mean you have permission to use it. Confirm both before publishing.
Steps to Update the Favicon
- 1. Log in to Squarespace and open the site you want to edit.
- 2. Locate the browser icon setting, using the editor search for "browser icon" if you can't find it in the menus.
- 3. Remove or replace the existing icon, then upload your new exported image.
- 4. Save or publish the change as prompted.
- 5. Verify the result using the checks below.
Verify the New Icon
- Open your site in a private or incognito window, which typically avoids the cached icon from earlier visits.
- In a normal window, do a hard refresh of the page.
- Check at least one other browser and a mobile device.
- Look at the icon on both light and dark tab themes, if your browser supports them, to confirm contrast.
- If the old icon still appears, clear the browser cache or wait; favicon caching can persist after the site itself has updated.
Search engines display favicons in results on their own refresh schedule, so a change visible on your site may take longer to appear there. This is outside Squarespace's control.
If Something Looks Wrong
- Old icon persists: almost always caching; test in a private window before changing anything else.
- Icon looks blurry or muddy: re-export from the vector master at the size Squarespace recommends and simplify fine details.
- Icon appears squashed or off-center: the export wasn't square or the mark wasn't centered on the artboard.
- Upload is rejected: compare your file's format and dimensions with Squarespace's current documented requirements.