How to add a browser icon AKA a favicon, in Squarespace
Adding a custom Squarespace favicon is an easy and effective way to make your website look more professional.
In this article, I'll explain how you can add your own custom favicon in Squarespace as well as tips on selecting the right image and troubleshooting any issues that may arise.
So let’s get started!
What is a Favicon and Why Should You Add One to Your Squarespace Website
A favicon is a small image, usually square, that appears in the tab of a web browser or in the address bar of a web page.
It's used to quickly identify websites and help visitors recognise them. This is great for brand recognition, as it gives you an opportunity to add a unique visual element to your website that will make it stand out from other sites.
Selecting the Right Image for Your Favicon
When it comes to selecting the right image for your favicon, you want to make sure that it’s super simple as the size of a favicon is very small...
A good rule of thumb is to pick an image size of 32x32 pixels (this is teeny tiny btw in case you have no idea how pixels work). This will ensure that your favicon looks crisp and clear regardless of the device it’s being viewed on.
Back to the simplicity thang...
Think about Facebook, if you have that tab open on your desktop along with a million other tabs, the Facebook one is instantly recognisable from the big blue and white F icon in the browser tab - let's get that for you too!
3 ideas for the type of Favicon icon you could pick...
The first letter of your logo
...or business name like Facebook, that's exactly what I do too (check out my websites favicon)
A visual icon
...like Instagram, you immediately think of the pink multi-coloured camera icon, right?
A shape
... if your businesses branding has lots of circles featured throughout your website and social media, perhaps add a circle.
It’s important to choose an image that’s recognizable and distinct so visitors will be able to easily identify your website when they see it in their browser tabs or bookmarks.
Favicon File Format
In terms of file format, .png (Portable Network Graphics) is the best choice for a favicon as this format allows for transparency in the image, giving you more flexibility when designing your favicon.
For example if you wanted to use a shape that's not square, it's nice to just see the shape against the usual grey like browser tab background. If you don't make it a .png file with a transparent background then you'll get a white background square around your image.
Once you’ve selected the right image for your favicon, you need to upload it to Squarespace so that it appears on all pages of your website and across devices. Fortunately, doing this is fairly easy!
How to Upload your Custom Favicon in Squarespace
Adding a custom favicon to your Squarespace website is simple and straightforward. All you need to do is upload the image you’ve chosen to Squarespace and then position it correctly. Here’s how:
Step 1: Log into the backend of your Squarespace website
Step 2: Click on the "Design" category on the main left hand navigation
Step 3: Select the "Browser Icon"
Step 4: Click on "Add a Favicon"
Step 5: Upload Your Favicon Image from your computer wherever you have saved it
Step 6: Click "Save"
Et voila, your Favicon is now live! Simply hit refresh on the front end of your website, the one your clients will see and you'll see your icon appear in the web browser.
Troubleshooting Common Issues with Adding a Custom Favicon in Squarespace
If you don’t see your custom favicon appear in the preview window, it’s likely that there is an issue with the file format. Make sure you are using a .png image with transparency enabled so that it displays correctly across all browsers and devices.
You can also try clearing your web browser’s cache to see if this fixes any issues. If you’re still having trouble, contact the Squarespace customer service team who will be able to help.
That's it! You've successfully added your own custom favicon in Squarespace and you can now start using it on your website. Having a favicon is an easy way to make your site look more professional and help
Final Thoughts on Adding a Custom Favicon in Squarespace
I know when I've worked with a lot of my clients they never knew what a Favicon was, hopefully I've helped you know exactly what one is now, how to select the right one for you and your business and most importantly - how to add it!
Go you, for now having an epic professional looking browser, helping you to stand out from the crowd! If you don't change it yourself, you'll be stuck with the standard Squarespace web browser icon and you don't want that, you iz a professional, what what!!?!!! ;-p
Peace out! Oh and pls feel free to take a screenshot of your favicon and add it to the comments section below, I wanna see what you create :)
