How to add favicon to Squarespace (and the reasons why it doesn’t work)

A favicon is a small square-shaped icon that is shown next to your webpage‘s title in a browser’s search or any other place on the web. The main reason for using favicon is to make your web resource more individual and recognizable.

Being created using Squarespace, all websites have the same cube favicons, which are assigned by default. So, when visitors come to your web resource, they know that you’re a part of the Squarespace community. 

However, if you want the favicon to fit your brand, it’s recommended to replace it with your own picture or logo. 

Keep reading to find out how you can do it and what are the reasons why your favicons do not work.

How to add a favicon to your website

The process is easy and consists of 3 simple steps.

1. If you use Squarespace version 7.1, you need to go to the Home menu, click on the “Design” button, and choose “Browser Icon”. If you work on version 7.0, there is a “Logo & Title” button instead of a “Browser icon”.
2. Now, you may use the uploader or simply drag the image from your PC. 
3. After your image is uploaded, click on the “Save” button.

Reasons why favicon doesn’t work

Now, let’s take a look at the most frequent reasons why favicons aren’t displaying.

1. Browser cache. This is the first thing you’d pay attention to. Browsers save the visited websites’ data and show the saved version to you to decrease the loading time, so I recommend you clear the browser cache and restart it. 
2. Image dimensions. It’s recommended to choose a favicon size in the range of 100 x 100 to 300 x 300 pixels. While different browsers come with different allowable favicon sizes, the above-mentioned dimensions are optimal for all browsers.
3. File format. It’s better to use PNG or ICO file formats for a favicon image. 
4. File size. The picture size can’t exceed 100KB.
5. Multiversion favicons. Currently, this option is unavailable and if you want your browser icon to work correctly, you need to upload only a single version of the image and delete all others.