How to Add a Browser Icon (Favicon) in Squarespace

BY BIG CAT CREATIVE
 

 
 
 

 

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, or commonly 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 no excuse to not have one. They make your website look so much more professional and personalised.
 

I understand, 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. Trust me, you will definitely look more professional with one of these favicons, than if you had none at all!
 


Sign up below to get access to this freebie!


By entering your details above you get access to the Freebie library full of free design and business resources!
How-to-add-a-Browser-Icon-(FAVICON)-in-Squarespacethumb-01.png


Follow these steps to learn how to add a browser icon (favicon) to your Squarespace website

 

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.

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:

Custom favicon freebie:

 

I hope that you now know why favicons are so important, and you add one to your website asap! 

What do you use for your favicon? Your logo? Or something more abstract? Let me know in the comments!

 
 

NEED MORE HELP WITH YOUR DESIGN?
You're in the right place!


 

Related Posts

 

LET'S CONNECT ON INSTA!