How to add a browser icon (favicon) in Squarespace 7.0 & 7.1

Squarespace Tips

Nov 8

  This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

First off, you might be thinking, what’s a browser icon? If you’re thinking that, then you need this tutorial ASAP.

A browser icon, also known as a favicon, is the tiny little logo that displays next to your website name in your browser:

I can’t tell you how many people I see that are using Squarespace sites, and don’t have a favicon. You can identify these people very easily, as they’re all using the Squarespace default favicon:

Yup... you've seen that little black box before, haven't you?

Squarespace makes it so easy to add a favicon, that there’s literally no excuse to not have one. They make your website look so much more professional and personalized.

I understand though, it’s hard to create graphics when you’re not a designer! Lucky for you, I have over 150 favicons for you to download right now! So, if you don’t have your own, you can use one of these, and I’m sure with 150+ to choose from, you’ll find one that suits your brand.

Download the Favicons here!

How to add a Browser Icon to your Squarespace site in Squarespace 7.0:

1. Login to the back end of your Squarespace website

2. Click Design > Logo and Title:

3. Scroll down to ‘Browser Icon’ (Favicon)

4. Click "Add a favicon" to upload, and upload your own image or one of my free favicons.

Note: If you’re creating your own, the recommended size is 32x32 pixels PNG on a transparent background. PNGs aren't supported by Internet Explorer, though, I'm not sure who uses Internet Explorer these days anyway. If you want to cater for these people, use a JPG, but unfortunately with a JPG you won't have the luxury of a transparent background.

5. Make sure you click save at the top left.

6. It might take a little while before you see it show up in your browser, so give it a minute and maybe a few refreshes.

Opt-ins

How to add a Browser Icon to your Squarespace site in Squarespace 7.1:

1. Login to the back end of your Squarespace website

2. Click Design > Browser Icon

3. Click "Add a favicon" to upload, and upload your own image or one of my free favicons.

4. Make sure you click save at the top left.

5. It might take a little while before you see it show up in your browser, so give it a minute and maybe a few refreshes.

Done! It’s as easy as that! It may take a few minutes to update, you may need to refresh the page (or clear your cache!)

Having a favicon makes your brand look so much more professional. It doesn’t really matter what it is, as long as you have one, and as long as it's not the Squarespace box! (The problem with using that one, is that everyone else is using it!)

I just updated this website with one of my free favicons. How much cuter does it look now?

Boring standard Squarespace favicon: