Add a Favicon to Squarespace

Upgrade your site aesthetics. Learn how to configure a clean tab favicon inside Squarespace settings.

Adding a favicon to Squarespace takes only a few minutes. You need a suitable favicon image, access to the correct Squarespace website, and the ability to open its favicon settings. In this guide, you’ll learn how to prepare a favicon, upload it to Squarespace, verify that it works, replace or remove it, and troubleshoot cases where the new icon does not appear immediately.

What Is a Squarespace Favicon?

A favicon, also called a browser icon, is the small square image associated with your website. It commonly appears next to your page title in browser tabs and bookmarks. Depending on the browser or device, it can also appear in other browser interfaces and sometimes in search results.

Every Squarespace site starts with Squarespace's default cube favicon unless you add a custom one. Replacing it with your own icon gives visitors a recognizable visual identifier for your website.

A favicon is separate from your website logo. Your logo may appear prominently in your site's header, while the favicon is designed to remain recognizable at a very small size.

What Should You Prepare Before Adding a Favicon to Squarespace?

Before opening Squarespace, prepare the image you want to use as your favicon. Squarespace's current favicon guidance recommends the following:

  • Use PNG: Squarespace recommends .png files for favicons and does not allow .ico files to be uploaded.
  • Use a square image: A square canvas works best because favicons are displayed as small square icons.
  • Aim for 100 × 100 px to 300 × 300 px: Squarespace recommends this range for favicon images. Although favicons can display at very small dimensions such as 16 × 16 px, a larger source image within this range works better across browsers.
  • Keep the file under 100 KB: Squarespace states that favicon files cannot exceed 100 KB.
  • Use a simple design: A favicon is much smaller than a normal logo, so complicated illustrations and long text can become unrecognizable.
  • Use strong contrast: The icon should remain distinguishable against light and dark browser interfaces.
  • Avoid excessive detail: Fine lines, small lettering, and multiple visual elements are difficult to identify at favicon size.
  • Start with a high-quality source: Downscaling a clean, sharp source generally produces a better result than enlarging a tiny image.

What file format does Squarespace recommend?

For a favicon specifically, Squarespace recommends PNG and does not support uploading an .ico file through its favicon uploader.

Do not confuse general Squarespace image-upload support with favicon-specific requirements. Squarespace supports several formats in other image areas, but its favicon documentation specifically recommends PNG.

How Do You Add a Favicon to Squarespace?

The current Squarespace process uses a dedicated Favicon panel. The exact route to that panel can vary depending on the Squarespace interface you are using, so focus on locating the site's favicon or browser-icon setting rather than relying on an old menu path.

  1. Log in to Squarespace: Open Squarespace and sign in to the account that manages your website. Make sure you have editing permissions for the site whose favicon you want to change.
  2. Open the correct website: From your Squarespace account dashboard, open the website you want to edit. This matters if your account manages multiple Squarespace websites. Uploading a favicon to one site will not change the favicon on another site.
  3. Open the favicon settings: Navigate through the site's settings or design controls until you reach the Favicon panel. Squarespace's current help documentation refers to this destination specifically as the Favicon panel. Older tutorials may describe the setting with labels such as Browser Icon, or place it under different areas of the interface. Do not assume an older path is still identical in your account.
  4. Upload your favicon: Inside the Favicon panel, drag your favicon image into the uploader, or click the uploader to select the file from your computer. Select the PNG favicon you prepared. Wait for the upload to finish. Check that the uploaded image appears in the favicon area. Squarespace currently supports an optional alternate favicon for dark mode. A default favicon must be added before you can add the dark-mode version.
  5. Save the changes: Click Save after the image has uploaded. Saving is important because uploading or selecting the image alone does not replace the published favicon until the change is saved. Squarespace's current instructions specifically direct users to click Save after the images upload.
  6. Open your website and check the browser tab: Open your site's published URL in a browser. Look at the browser tab next to the page title. Your new favicon should replace the default Squarespace icon.

If you still see the previous favicon, do not immediately assume the upload failed. Browsers can cache favicons aggressively, so the old icon may continue appearing even after the new favicon has been saved successfully.

Where Is the Favicon Setting in Squarespace?

The interface has changed over time, which is why different Squarespace tutorials can show different navigation paths. The current Squarespace documentation identifies the destination as the Favicon panel.

You may encounter older instructions referring to:

  • Browser Icon
  • Logo & Title
  • Design
  • A browser-icon setting within the site's design or branding controls

These labels should not be treated as universally current. Squarespace can change the location or naming of controls between interfaces and platform versions. The important setting is the one specifically intended for the site's favicon or browser icon. It is not the same setting as your site logo or page title.

How Do You Create a Favicon for Squarespace?

You do not need to design a favicon from scratch. The simplest approach depends on what brand assets you already have.

Create a favicon from your logo

If you already have a logo, create a simplified square version of it. Do not automatically use the entire horizontal logo. A long business name may become unreadable when reduced to favicon dimensions. A better approach is often to use a recognizable symbol from the logo, a single initial, a monogram, or a simplified brand mark.

Create a favicon from text or initials

For a text-based favicon, use one or two prominent letters rather than an entire business name. For example, a company called Digital Marketing Solutions could use DM instead of trying to fit the full name into the icon. Use a bold, simple typeface and enough contrast to keep the letters recognizable.

Convert an existing PNG into a favicon

If you already have a suitable PNG logo or icon, you can convert it into favicon-ready artwork using an image conversion tool. For example, PNGtoFavicon.com can convert a PNG image into a favicon. This is useful when you already have a square PNG but need a favicon-oriented file for your website.

Before uploading the result to Squarespace, check that the final image meets Squarespace's favicon requirements, particularly the PNG format, square dimensions, and 100 KB maximum file size.

Keep the design recognizable at small sizes

The most important design test is simple: reduce the icon substantially and look at it without zooming in. If you cannot identify the symbol or letter quickly, simplify it. A favicon normally works better as a bold visual mark than as a miniature version of your entire logo.

How Do You Check if Your Squarespace Favicon Is Working?

After saving the favicon, verify it on the actual published website.

  • Check the browser tab: Open your website and look at the icon beside the page title in the browser tab. This is the most direct test because browser tabs are one of the primary places favicons appear.
  • Test a fresh browser session: If the old icon remains visible, open a private or incognito window, visit your website, and check the browser tab again. This helps determine whether the problem is caused by cached favicon data in your normal browser session.
  • Check another desktop browser: Test the site in another browser such as Chrome, Edge, Firefox, or Safari. A favicon displaying correctly in one browser but not another can indicate browser-specific caching or display behavior rather than a Squarespace upload problem. Safari can display favicons differently from other browsers. Squarespace notes that Safari may show the favicon when you click the address bar or when multiple tabs are open, and it can add a border or background for contrast.
  • Check on mobile: Do not treat the absence of a favicon on a mobile browser as proof that the upload failed. Squarespace states that favicon display on mobile depends on the mobile browser, and in some cases the favicon will not display at all.

Why Is My Squarespace Favicon Not Showing?

A favicon that does not appear immediately is usually a caching or configuration issue rather than a reason to rebuild the entire website.

Browser cache

Problem: Your browser is still displaying the old favicon.
Fix: Clear the browser cache, close and reopen the browser, then revisit your site. Squarespace specifically recommends clearing the browser cache and restarting the browser when a favicon does not update immediately.

The favicon was not saved

Problem: The image was uploaded but the change was not saved.
Fix: Return to the Favicon panel, confirm the correct image is present, and click Save.

You edited the wrong website

Problem: The favicon looks unchanged because the image was uploaded to another Squarespace site in your account.
Fix: Confirm the website name and domain before changing the favicon.

The image does not meet favicon requirements

Problem: The file is too large, uses an unsuitable format, or has dimensions that produce a poor result.
Fix: Re-export the image as PNG, keep it below 100 KB, and use a square image between 100 × 100 px and 300 × 300 px as Squarespace recommends.

The favicon was changed recently

Problem: Squarespace has saved the new favicon, but your browser still shows an older version.
Fix: Test in an incognito/private window or another browser before making additional changes.

You are testing the wrong domain or page

Problem: You are checking a staging, preview, built-in Squarespace domain, or different domain from the one you edited.
Fix: Open the exact published website URL associated with the Squarespace site you changed.

Mobile browser behavior

Problem: The favicon appears on desktop but not on your phone.
Fix: Check the same site on a desktop browser before assuming the upload failed. Mobile favicon behavior varies by browser, and Squarespace notes that mobile browsers may not display favicons at all.

How Long Does It Take for a Squarespace Favicon to Update?

There are three separate events to distinguish:

  1. Squarespace saves the favicon: This happens when you upload the image and save the favicon settings.
  2. Your website serves the new favicon: The saved site configuration must provide the updated icon to visitors.
  3. Your browser displays the new favicon: The browser may continue using a previously cached favicon.

Because browsers can retain favicon data, there is no reliable universal update time that guarantees the new icon will appear immediately. Squarespace specifically warns that browsers can be persistent about cached favicons. Test a private browser window or a different browser before concluding that the change failed.

How Do You Change or Replace a Squarespace Favicon?

Replacing an existing favicon follows essentially the same process as adding one for the first time.

  • Log in to Squarespace.
  • Open the website you want to change.
  • Open the Favicon panel.
  • Select the existing favicon uploader.
  • Upload the new PNG image. (If you use a dark-mode favicon, update that version separately as needed.)
  • Click Save.
  • Open the published website and check the browser tab. Test in a private window if the previous favicon continues to appear.

Squarespace allows an optional dark-mode favicon, but the default favicon must exist before an alternate dark-mode version can be added.

How Do You Remove a Squarespace Favicon?

If you want to stop using your custom favicon, open the favicon settings and look for the available removal or deletion control next to the uploaded image. The exact control can vary with the current Squarespace interface, so do not rely on an older tutorial that specifies a particular button name.

After removing the custom favicon, save the settings and test the website again. Squarespace states that sites without a custom favicon start with its default cube favicon.

Common Squarespace Favicon Mistakes to Avoid

  • Using a complicated image: Simplify the design so the icon remains recognizable at a small size.
  • Using a tiny source image: Start with a clean, adequately sized source rather than enlarging a low-resolution image.
  • Poor contrast: An icon that blends into a browser's background may appear invisible.
  • Using too much text: Full business names rarely remain readable in a favicon.
  • Uploading the wrong file type: Squarespace recommends PNG for favicons and does not allow .icon uploads.
  • Exceeding the file-size limit: Favicon files cannot exceed 100 KB.
  • Forgetting to save: Always save after the image finishes uploading.
  • Checking only one browser: Use another browser or a private window when testing.
  • Assuming a cached icon means the upload failed: Clear the cache before making unnecessary changes.
  • Expecting mobile browsers to behave like desktop browsers: Mobile favicon support and display vary by browser.

Squarespace Favicon FAQs

Can I add a PNG favicon to Squarespace?

Yes. Squarespace recommends PNG for favicon uploads. The current Squarespace favicon documentation also states that .icon files cannot be uploaded through the favicon setting.

What size should a Squarespace favicon be?

Squarespace recommends uploading a favicon between 100 × 100 px and 300 × 300 px. It also states that the favicon file must be no larger than 100 KB.

Why is my Squarespace favicon not showing?

The most common explanation is browser caching. Clear your browser cache, restart the browser, or test the site in a private window or another browser. Also confirm that you saved the favicon and are checking the correct published website.

Can I change my Squarespace favicon?

Yes. Open the Favicon panel, upload the replacement image, and save the change.

Does Squarespace automatically resize a favicon?

Squarespace's current documentation recommends uploading favicon artwork between 100 × 100 px and 300 × 300 px, while noting that favicons display at very small sizes such as 16 × 16 px. The safest approach is to prepare the image at an appropriate square size rather than relying on a tiny source file.

How do I make a favicon for Squarespace?

Create a simple square icon from your logo, initials, or a recognizable brand symbol. Export it as a PNG, keep it under 100 KB, and use dimensions between 100 × 100 px and 300 × 300 px. A conversion tool such as PNGtoFavicon.com can help turn an existing PNG into favicon-ready artwork.

How long does a Squarespace favicon take to update?

There is no dependable universal time for the browser display to update. Squarespace can save the change immediately, but the browser may continue displaying a cached version of the previous favicon. Clear the cache or test in a private window when verifying the update.

Can I use my logo as a Squarespace favicon?

Yes. A logo can be used as a favicon, but it should be simplified when necessary so it remains recognizable at small dimensions. Squarespace also notes that its own Squarespace Logo tool can create PNG logos that can be used as favicons.

Conclusion

To add a favicon to Squarespace, prepare a simple square PNG, open the site's Favicon panel, upload the image, and save the change. Then verify it in a browser tab. The most important troubleshooting point is caching. A successful favicon upload may not appear immediately because browsers can retain the previous favicon. Test in a private window, clear the cache, or check another browser before assuming the Squarespace upload failed.