How to Add or Change a Favicon in Squarespace

The short answer

To change a favicon in Squarespace, open your site's settings, find the favicon option (older versions of the editor labeled it the browser icon), upload a square image file, and save. Your new icon replaces any previous one, including the default Squarespace icon. The upload takes a minute. Preparing artwork that still reads clearly at tab size takes more care, so most of this guide covers that.

A favicon is the small icon browsers show in tabs, bookmarks, history lists and some search results. It is usually built from a logomark, which is the symbol part of a logo, rather than a lockup. A lockup is the full arrangement of symbol, wordmark and tagline. If your logo exists as vector artwork, meaning shapes defined by mathematical paths instead of pixels, you can scale it to any size without losing quality. That makes vector artwork the best source for a favicon file.

Before you start

• Edit access to the Squarespace site, such as owner or administrator permissions.
• The logo source file, ideally in a vector format you can open in a design application.
• Confirmation that you have the right to use the logo. A file extension such as SVG or AI does not prove the artwork is fully vector, editable, or cleared for reuse.
• The current accepted file formats and recommended dimensions from Squarespace's own help documentation. These requirements can change, and this guide has no confirmed figures for them.

Step 1: Choose the right symbol

A favicon is displayed very small, so the main design decision is what to leave out. Start from the most compact, recognizable part of your brand identity.

• Use the logomark on its own if your logo has one. A full horizontal lockup shrunk into a square becomes an unreadable smear.
• If your logo is text only, consider a single initial or a monogram taken from the wordmark, set in the same typeface or redrawn to match it.
• Remove taglines, small text, thin outlines, fine gradients and minor decorative details. These disappear or turn to noise at tab size.
• Avoid relying on a single brand color against a transparent background. Check that the symbol keeps enough contrast against both light and dark browser themes. If it does not, add a solid background shape such as a square or circle.
• Make sure the shape still looks like your brand when simplified. A favicon should be recognizable as yours at a glance, not a new logo.

Step 2: Prepare the artwork in your vector file

• Create a square artboard. An artboard is the canvas area that defines what gets exported.
• Place the symbol centered on the artboard, leaving a small, even margin so it does not touch the edges. Browsers may crop or crowd edge-to-edge artwork.
• If the symbol includes letters, convert the type to outlines (also called creating outlines or converting text to paths). This turns the characters into shapes, so the export does not depend on the font being installed.
• Simplify paths where you can. Merge overlapping shapes, remove stray anchor points, and thicken hairline strokes so they survive reduction. Expanding strokes into filled shapes helps keep line weight consistent when the artwork scales.
• Zoom out or preview the artboard at a very small size to judge legibility before exporting. If you have to squint to recognize it, simplify further.

Menu names for outlining type, expanding strokes and exporting differ between design applications and versions. Check the documentation for the exact version you use before relying on a specific command.

Step 3: Export the favicon file

Site builders commonly accept raster images, which are pixel-based formats such as PNG, for favicons rather than vector files. Export a raster copy from your vector master and keep the vector file as your editable source. Confirm which formats Squarespace currently accepts before you export.

• Export the square artboard only, not the whole document.
• Use the dimensions Squarespace currently recommends. If no exact size is given, export at a generous square size rather than a tiny one, so the platform and browsers can scale down cleanly.
• Use a transparent background if your symbol has enough contrast on its own. Otherwise include the solid background shape you designed.
• Export in an RGB color mode. Screens display RGB, and CMYK files intended for print can shift in color or fail to upload.
• Name the file clearly, for example with your brand name and the word favicon, so it is easy to find later.

Step 4: Upload the favicon in Squarespace

Where the setting lives depends on your Squarespace version and on interface updates. In the current editor, the favicon option has typically sat among the website or site-wide settings tools. In version 7.0 sites, it has typically been found in the design area alongside logo and site title settings. If you cannot find it, search for favicon or browser icon in the editor's search or the help center. Confirm the location against Squarespace's current documentation for your version.

• Log in and open the site you want to edit.
• Navigate to the favicon or browser icon setting.
• Upload your exported image, or remove the existing icon first if the interface requires it.
• Save or confirm the change if prompted.

Step 5: Confirm the new favicon is live

• Open your published site in a private or incognito window. Browsers cache favicons aggressively, so a normal window may keep showing the old icon.
• If the old icon persists, do a hard refresh, clear the browser cache, or check on a different browser or device.
• Check the icon in both light and dark browser themes to confirm it stays visible.
• Look at it beside other open tabs. It should be recognizable without any context.
• Be aware that search engines show favicons in results only after they recrawl your site. That update happens on their schedule, not when you save in Squarespace.

If something goes wrong

• Upload rejected: the file format or size likely does not meet Squarespace's current requirements. Re-export to match the documented specifications.
• Icon looks blurry: the export was probably too small, or the artwork has details too fine for its display size. Simplify the symbol and export at a larger square size.
• Icon looks stretched or off-center: the artboard was not square, or the symbol was not centered. Fix the artboard and export again.
• Icon is invisible in some tabs: a transparent background with low contrast is blending into the browser theme. Add a solid background shape.
• Old icon still showing: this is usually caching. Test in a private window before changing anything else.

Information gaps to check yourself

This guide does not include confirmed Squarespace file-format lists, pixel dimensions, file-size limits, or exact menu labels for a specific editor version. These details come from the platform and can change. Verify them in Squarespace's current help documentation before you finalize your export.