How to Change your Squarespace Favicon Icon
You know that old saying... The dividends are in the detail? A common oversight I see often is forgetting to upload a custom Squarespace favicon (browser icon).
When you have 20 different tabs open, the first thing that catches your eye is the tiny little image on the tab. It might seem like a small thing, but having a favicon for your Squarespace website allows users to scan their tabs quickly and interact more frequently with your website.
Thankfully it’s really simple to create and takes a few minutes to upload!
How to add a favicon icon to your Squarespace website
In this post I’ll be taking you through how to create your own favicon with the correct size and dimensions and how to upload it onto your site.
Before we start, if you’re wondering what on earth a favicon is, here’s the icon for my website on the left hand corner of the tab. The best way to describe it is a miniature logo.
When you first start a trial website on Squarespace, this automatically defaults to a boring black cube. Unless you're happy to promote your website with Squarespace’s favicon (I hope not!), you’ll defo want to change this before your website is out in the wild!
By the end of this post, you’ll have your favicon created and uploaded onto your site! Easy peasy so let's get down to biz!
Favicon icon size and dimensions
Favicon icon sizes work best when sized between 100px x 100px and 300px x 300px. These are then displayed at 16px x 16px on your browser tab. The recommended file size is less than 100kb.
The key to designing your favicon is to keep it simple. If your business name is ‘Laura Smith Photography’, you don’t want your favicon icon to use the entire name as it’ll be so small, no one will be able to read it. Try using the initials, a single letter or a symbol associated with your brand.
If your logo is very simplistic, you can use this as your favicon icon by creating a mini version.
To design your own, hop into Canva or Adobe illustrator. Use a square art board at the dimensions mentioned above.
Handy tip: If you want to save a favicon with a transparent background, be sure to save the image as a PNG file.
Upload favicon to your Squarespace 7.1 website
To add your favicon to your site, head over to:
Design -> Browser Icon -> Add favicon -> Upload image and save
Give it a minute or two to update and you’ll see it update on your browser tab like this.
Now how much more professional does this look than Squarespace’s favicon? Right?!
And we want you to stand out like a pro with a cohesive website!💁🏽
