How to add a favicon to your Squarespace website
Have you ever wondered about that tiny logo next to your website name in your browser? It's called a favicon, also known as the browser icon. Though small, a favicon plays and important role in branding and user experience. It can be useful to keeping your website in theme with your branding and is one of the first things a potential customer will see when you show up on Google.
I’m pretty sure you’ve also seen the generic black box as the favicon for Squarespace sites. That’s the default Squarespace favicon. That’s the first thing that let’s you know that a website is built on Squarespace.
Customizing this default favicon is one of the things that differentiates a professional website from a DIY one (the devil is in the details!)
Before we get into the steps to adding a favicon to your site, let’s first understand why a favicon is important.
Why Favicon Matters:
A favicon isn't just a tiny logo; it's a visual representation of your brand that appears in bookmarks, browser tabs, and search engine listings. A unique favicon makes your website look more professional and trustworthy and increases the chances of a user clicking on your links.
How to create a favicon:
If you’re working with a designer, the favicon is a part of the logo suite. But in-case you want to create one for yourself, here are a few easy ways to do it:
Use a free tool like this favicon generator. This tool is easy to use and you can easily customize your favicon according to your brand.
Use Canva or Adobe Express to create your unique favicon
Use an icons library like https://icons8.com/icons/ to find an icon that fits your brand and change it according to your brand colors.
Some useful Tips for using a favicon:
For your favicon, go for a 48x48 pixels PNG image on a transparent background for optimal display. If catering to Internet Explorer users, consider using a JPG format, although PNG is generally recommended for modern browsers.
I always advise adding a lighter version of your favicon for users with dark mode set in browsers. I am a dark mode person myself and if the favicon on a website is dark I can barely see it. Kind of beats the purpose, doesn’t it?
How to add a favicon to Squarespace websites
Ok now let’s get into the details of how you can add a favicon. Note that the process is the same for Squarespace 7.0 and 7.1.
Go to Website you want to edit.
Go to Settings in the left panel.
In the settings menu, click on Favicon.
Now upload your files, remember to use a lighter icon for dark mode.
Save your changes at the top left.
Tip: If you added your favicon but it’s not immediately visible, make sure you clear your cache. For Microsoft Edge use “Ctrl + Shift + Del” and select “Cached images and files” and click the “Clear Now” button.
Refresh the page
You should now see the favicon visible on your browser!
add a favicon in Squarespace
And you’re done! You have successfully added your unique favicon to your Squarespace site! Your brand now boasts a more professional and personalized appearance.
Meet Your Designer:
Hi I’m Aneet. I’m a Seattle-based web designer who is also a tech nerd. My love for design & code is only matched by my appreciation of classic novels, history, and music from eras before I was born (maybe I’m an old soul). I love solving problems so if have any questions feel free to reach out on Instagram @brandunpuzzled (Instagram is where I hang out, at least on DMs!)