Setting Up a Favicon in Squarespace

A Squarespace favicon is the small icon that appears in browser tabs, bookmarks and history lists next to your site's name. Squarespace sets it from an image you upload in the site settings, so the platform side is simple. The harder part is the artwork. A full logo that looks sharp on a page can turn into an unreadable smudge when a browser shows it in a tab. This guide explains what you are actually uploading, how that relates to your vector logo, and how to refine the mark so it holds up at favicon size.

The short answer

To set a favicon in Squarespace, you upload a single square image through the site's browser icon or favicon setting. The upload is treated as a raster image, a fixed grid of pixels, and browsers then display it at very small sizes. Starting from a vector logo is still the best approach, but the vector file is your source, not the thing you upload. You use it to export a clean, square raster file designed to stay legible when it is shown only a few pixels wide.

Squarespace has changed menu names and locations across platform versions and interface updates. No current documentation was supplied for this article, so it does not state an exact menu path, recommended upload dimensions, file size limits or accepted formats. Check Squarespace's current help documentation for those details before you export your file.

Vector source, raster favicon

In vector artwork, shapes are defined as mathematical paths, so you can scale them to any size without losing sharpness. A favicon as browsers commonly display it is a small raster image, a fixed grid of pixels. When you export from vector to raster, every curve and edge has to land on that grid. At large sizes this is invisible. At tab size, a thin line or a gap between two shapes may fall between pixels and render as a faint blur, or disappear.

This is why pixel grid refinement matters for favicons in particular. You are not only shrinking the logo. You are adjusting the vector shapes so that, at the exact pixel dimensions you export, the important edges line up with whole pixels and the key features stay distinct.

Check that your logo file is really vector

A file's extension does not prove it contains editable vector paths. An SVG, EPS, PDF or AI file can contain an embedded raster image, a photo or pixel-based logo wrapped in a vector container. Some files that look like artwork are only raster previews. If you scale up an embedded raster, you get the same pixelation as with any bitmap. Before you refine the mark, open the file in a vector editor and confirm that the logo is made of selectable paths and shapes, not a single placed image.

If the only version you have is raster, you can still make a favicon from it. You will have less control over edge alignment, though, and a redraw or trace of the simplified mark may produce a cleaner result.

Refining the mark for a small pixel grid

These practices reflect general icon design principles. They are editorial guidance, not Squarespace requirements:

• Use the simplest recognizable part of the logo, such as the symbol, a monogram or a single letter, rather than the full lockup with wordmark and tagline.
• Work on an artboard that matches a target export size, and preview it at the small sizes browsers commonly use for tab icons, such as 16 and 32 pixels square.
• Snap straight edges and key anchor points to whole-pixel positions so horizontal and vertical lines render crisp instead of half-blurred.
• Thicken thin strokes and widen narrow gaps until each one occupies at least a full pixel at the target size.
• Remove fine detail, small text, subtle gradients and low-contrast elements that cannot survive at that resolution.
• Keep the composition square and centered, with enough padding that the mark does not feel cramped. Do not let it shrink so far that it becomes hard to see.
• Check contrast against both light and dark browser themes. A transparent background can help, but a mark that relies on one background color may vanish on the other.

After refining, export a square raster file from the vector source at the size and format Squarespace's documentation currently recommends. Keep the refined vector file as a separate master. That way you can re-export later if requirements change or you need the icon for other uses, such as app or social profile icons.

Uploading and checking the result

Once you have uploaded the image in Squarespace's favicon or browser icon setting, view the live site in a browser tab and judge legibility at actual size. Browsers often cache favicons, so a new icon may not appear right away. A private window or a different browser can show whether the update has taken effect. Squarespace's documentation should also tell you whether a favicon displays during trials, on unpublished sites or under specific plans. That detail was not available for this article.

Rights to the artwork

Being able to download a logo file is not the same as having permission to modify it or use it as a favicon. Simplifying, cropping or redrawing a mark changes the artwork. The logo's trademark, any custom or licensed fonts in it, and the artwork itself may each have their own terms. If the logo belongs to your own business and you hold the rights, this is rarely an issue. If it came from a designer, a template or a brand you represent, confirm that derivative versions are permitted and that brand guidelines allow a simplified icon.

What this guide could not confirm

No Squarespace-specific evidence was supplied for this article. The current menu location, recommended pixel dimensions, accepted file formats, whether SVG favicons are supported, file size limits and plan-related behavior are all unconfirmed here. Treat those as items to verify in Squarespace's own help documentation. The guidance on vector sources, raster export and pixel grid refinement rests on general, widely applicable design principles rather than platform documentation.