How to Change the Favicon in Squarespace

The short answer

To change the favicon on a Squarespace site, upload a new square image in the site's favicon setting (Squarespace also calls it the browser icon), save, and then check it in a fresh browser session. The upload takes a moment. Most of the work is in preparing the artwork. A favicon is the small icon that appears in browser tabs, bookmarks and history lists. It is displayed at very small sizes, often around 16 pixels square in a tab, so a full logo rarely survives intact. The usual approach is to pick one simple symbol from your logo, prepare it in your vector source file, and export a raster image for upload.

Two terms come up throughout this guide. Vector artwork describes shapes as mathematical paths, so it can scale without losing sharpness. Raster artwork, such as a PNG, is a fixed grid of pixels. You design and simplify the icon in vector form, then export it to the raster format Squarespace accepts.

Evidence gaps to check before you start

No version-specific Squarespace documentation was supplied for this guide. The exact menu path, accepted file types, recommended pixel dimensions and any file-size limit are not confirmed here. Squarespace has moved this setting between platform versions and interface updates. Before uploading, look up the favicon or browser icon article in Squarespace's current help documentation for your site's version. Also confirm there whether SVG uploads are supported. Do not assume that they are.

Choose the right symbol for the favicon

Symbol selection is a design decision, not a platform requirement. The following recommendations reflect how small icons are actually viewed:

Use the logo's standalone mark if it has one, such as an icon, monogram or emblem, rather than the full lockup of mark plus name.
If the logo is only a wordmark, consider a single initial or a two-letter monogram taken from it. Full words become unreadable at tab size.
Prefer bold, solid shapes over thin outlines, fine strokes, gradients and small interior details.
Choose a symbol that fits a square comfortably. Wide or tall marks shrink to tiny shapes when centered in a square.
Check contrast against both light and dark browser themes. A dark mark on a transparent background can disappear in a dark tab bar.

Prepare the vector artwork

Start from the original vector source if you have it. A file extension such as AI, EPS, PDF or SVG does not prove that the file holds editable vector paths. Some of these files only wrap an embedded raster image. Open the file and confirm that the shapes are made of selectable paths. Also make sure you have the right to use and adapt the logo.

Create a square artboard, which is the working canvas that defines the export area.
Place the chosen symbol and leave a small, even margin so it does not touch the edges.
Convert any text to outlines. This turns letterforms into ordinary paths, so the icon no longer depends on an installed font.
Expand strokes into filled shapes, then merge overlapping shapes into clean compound paths. This produces predictable edges when the artwork is rasterized.
Remove or thicken details that would fall below a pixel or two at small sizes.
Align key horizontal and vertical edges to the pixel grid where your software allows it. This reduces blurry anti-aliased edges in the exported image.
Decide on the background. A transparent background suits most marks. A solid shape behind the symbol can improve visibility on varied tab colors.

Preview the artboard at reduced zoom or in a small-size preview before exporting. If the symbol becomes an unrecognizable blob, simplify it further or choose a different element of the logo.

Export the file

Export a square PNG from the vector artwork. Use a transparent background if your design calls for one. Match the pixel dimensions to the size recommended in Squarespace's current documentation. That figure is not confirmed in this guide. If Squarespace's documentation lists other accepted formats, such as ICO, use them only where the documentation confirms support. Keep the layered vector source file so you can re-export at another size later without rebuilding the icon.

Upload the favicon in Squarespace

Log in to your Squarespace account and open the site you want to edit.
Find the favicon or browser icon setting. Its location depends on your site's version and the current interface, so confirm the path in Squarespace's help documentation.
Remove or replace the existing icon if one is present.
Upload your exported square image.
Save or apply the change if the panel asks you to.

Confirm the result

Browsers cache favicons aggressively, so your own browser may keep showing the old icon after a successful upload. To check the change reliably:

Open the live site in a private or incognito window, or in a browser you have not used to visit it before.
Check the icon in a browser tab in both light and dark themes.
Bookmark the page and confirm the bookmark shows the new icon.
If the old icon persists in a fresh session, re-open the favicon setting and confirm that the new file was saved. Then check Squarespace's documentation for any propagation delay.

The task is complete when the new icon appears in a fresh browser session, reads clearly at tab size, and stays visible against both light and dark backgrounds.