Add or change a favicon in Squarespace

The short answer

Squarespace lets you add a favicon, which it may label as a browser icon, by uploading an image file in your site's settings or design tools. Upload a new file to set one for the first time. Replace the existing file to change it. The favicon is the small image shown in browser tabs, bookmarks and some search and history views. It is a separate asset from the logo in your site header, so updating one does not update the other.

Evidence gap: no current Squarespace documentation was supplied for this article. The exact menu path, accepted file formats and recommended dimensions are not confirmed here. Squarespace has moved this setting between platform versions and interface updates. Check Squarespace's own help material for your site version before you prepare the file.

General steps to add or edit the favicon

• Open your site in the Squarespace editor while logged in as an owner or a contributor with permission to change site design or settings.
• Find the favicon or browser icon setting. Depending on your site version, it may be under website tools, design, or logo and title settings. Searching the editor for "favicon" or "browser icon" may be quicker than browsing menus.
• Upload your prepared image. To change an existing favicon, remove or replace the current file.
• Save your changes.
• Check the result in a private browser window or a different browser.

Browsers cache favicons aggressively, so an old icon can stay visible after the change has been saved. This is normal browser behaviour, not a sign that the upload failed. If the new icon still does not appear in a fresh private window after some time, check that the upload saved and that the file met Squarespace's stated requirements.

Where your vector logo fits in

A favicon is shown at a very small size, so a full logo with a wordmark, tagline or fine detail usually becomes unreadable. A simplified mark, monogram or single letter from the logo system tends to work better. Whether a given logo simplifies well is a design judgment, not a technical rule.

A vector master file is the best place to make that simplification. You can scale it without quality loss, centre it on a square canvas, thicken strokes and remove small details. You then export it at the size and format the platform accepts. Whether Squarespace accepts SVG uploads for the favicon is not confirmed by the evidence here. Plan to export a raster file, such as PNG, from your vector source unless Squarespace's documentation says otherwise.

Check that the source file is actually vector

A file extension such as SVG, EPS, AI or PDF does not guarantee editable vector paths. Some of these files contain only an embedded raster image, or a raster preview wrapped in a vector container. Open the file in a vector editor and inspect it. If you can select and edit individual paths and anchor points, it is vector artwork. If you only find a single placed image, it is raster artwork, and enlarging or simplifying it will not give clean results. In that case, ask the logo's designer or owner for the original vector master, or have the mark redrawn.

Permission to use and modify the logo

Having access to a logo file is not the same as having permission to change it. Cropping, simplifying or recolouring a logo for a favicon is a modification. If the logo belongs to a client, an employer or another brand, confirm that you may adapt the artwork and use it in this way. Any fonts used in the mark may have their own licence terms, and trademark use may be restricted separately from file access.

Before you upload

• Confirm Squarespace's current accepted formats and recommended dimensions for your site version.
• Use a square composition with the mark centred and enough padding that it is not clipped.
• Preview the icon at actual tab size, and on both light and dark browser themes if possible.
• Keep the editable vector master separate from the exported favicon file so future changes start from the source.