How to Add a Custom Favicon to Your Squarespace Website
One of the easiest ways to make your website look more professional and on brand is with a favicon.
What is a favicon?
Do you ever have a million tabs open in your browser and all you can see is the little icon? That’s a favicon, also know as a browser icon.
If you don’t add your own favicon to your Squarespace website, you will automatically be given the default which is a black box. Type in your URL in your browser and see for yourself.
I’m going to go over why you need a favicon, what it should look like, how to create one, and how to add it to your Squarespace website.
Why do you need a favicon?
Favicons are a simple way to add to your branding consistency. Branding consistency is extremely important for your online business and to help create a memorable and professional brand.
As I just mentioned, a favicon also helps your website and business to look more professional. Think about it, when was the last time you visited a professional website and they had a default favicon? Never.
Related posts: 10 Tips for a Professional Website
What should your browser icon look like?
Your favicon can be anything you want, as long as it’s on brand. Common choices are your logo, a lettermark, an image that represents your brand, etc.
Just like when designing your logo, you want your favicon to be simple. It is a very small icon so the simpler the better.
Another important tip is to create it with a transparent background. Having a white square around your favicon is almost worse than having the default.
How do you create your favicon?
If you aren’t planning on using your logo or an image that’s already made up, you can use any image editing software you want, such as PhotoShop or Canva.
Just remember to save it with a transparent background (which can’t be done with the free Canva account, but you can use the 30 day free trial and save your image with a transparent background).
To unzip the file simply double click and your computer will unzip it for you. Now you will have a folder called Favicomatic and inside you will have three image files at different sizes.
One will be a 16x16 PNG, another is 32x32 PNG, and the other is an ICO file. Usually the ICO file is perfectly fine, but you can also use the 32x32 option as well.
The 16x16 usually ends up being too blurry, at least in my experience.
Squarespace does mention that Internet Explorer doesn’t support PNG. So it’s best to use ICO to make sure your browser icon shows up no matter what browser is being used.
How do you add your custom favicon to your Squarespace website?
From your home dashboard select Design -> Logo & Title then scroll down to Browser Icon (Favicon) and click to add your favicon.
When your photo is uploaded it will look super blurry in this upload box, but don’t worry, this isn’t actually how it will look in the browser tab.
After you hit save you will need to refresh the page before your favicon actually appears in the browser tab.
Check to make sure it looks good. If it is blurry, try one of the other files given to you from Favicomatic.
You might be wondering why I had you go to Favicomatic to resize your image when Squarespace says they will resize the image. I have found that sometimes when I let Squarespace resize my images, they sometimes turn out blurry or poor quality.
You could create your image as a 32x32 but most editing programs don’t have the option to save your files as ICO.
If you found this article to be helpful, share it with your entrepreneur friends so we can help them too!