How to design, create & upload a Squarespace favicon
Or in laymans terms “how to change the little icon of your website”
You know that little grey square you see on the bar in your browser when you’re on your Squarespace website?
Yes… that one. That’s your Squarespace favicon also known as your Squarespace browser icon. And as much as I love Squarespace, it’s a dead giveaway that your site is a Squarespace site - not to mention that you’re missing a great opportunity to look next-level professional, and use your incredible branding consistently.
This blog covers everything you need to know about Favicons (AKA browser icon) on Squarespace, including what is a favicon anyway?! Design tips to ensure your favicon stands out from the crowd, the file type to use and how to create and export your Favicon in 3 easy steps.
But first things first…
What is a Favicon or Browser Icon?
A favicon is also known as a browser icon and it’s the little icon that sits at the top of the browser window against each open tab and helps your page stand out from the rest. It’s a great way to reenforce your branding and a great way to make your Squarespace Website look more professional & stand out in the navigation bar!
What makes a good favicon?
If often see people make mistakes with their Favicon design - even big organisations (and webdesigners - oops!) sometimes choose Favicons that look less than fantastic.
Your favicon should be simple (a favicon is absolutely tiny so any detail will be lost). Avoid complex design, patterns or logos that include full words - these will be lost when people look at your favicon.
Your favicon should be consistent with your brand - a submark (small component of your logo) or simple icon in your brand colours are some good things to use for your favicon design
Your favicon should stand out! Consider both dark theme and light theme browsers. Dark favicons (for example black letters disappear easily on dark theme browsers which are being used more and more frequently as people seek to protect their eyes from the computer glare. Similarly light favicons can blur into the background on a light browser theme. I’m a fan of using a circle or square with rounded edges that includes both dark and light elements so it will show up well in both rather than, for example, two dark letters on a transparent background that would disappear on a dark browser background.
Have a look at these browser icons showing on my dark themed browser above - which show up the best? Which have the highest visual impact? Use this to help you design your favicon.
How to design a favicon for your Squarespace Website in 3 simple steps
There are so many choices of programme to whip up a quick favicon for your Squarespace Website. I personally love the adobe suite - particularly Adobe Illustrator for this. But you can also use Canva - even the free version will be enough to create your favicon.
Decide on whether you’d like to have a solid background colour (as I mention above I’m a fan of a circle or square with rounded edges) as a background. Use one of your brand colours for this.
Add your detail on top. I suggest a sub-mark or the initials of your website, or indeed your logo if it’s simple enough. Make sure this is in a colour that contrasts sufficiently with the background colour you chose.
Zoom out of your Favicon to see it in “real size” and check it stands out. Make any adjustments if needed. Then export in PNG with a transparent background so you don’t end up with an ugly white square behind!
What file type should you use for your Squarespace favicon?
The file type of your favicon is important. Don’t know what I mean when I say file type? I've got you covered in this blog.
Squarespace accepts either PNG or ICO files for your favicon. Note that PNG files don’t show up on internet explorer. Don’t have your image in ICO? See this for how to convert an image to an ICO file.
Enjoying this read? Check out the rest of my Squarespace related blogs in the back-catalogue…
What size should a Squarespace favicon be?
Favicons should be between 100px by 100px to 300px by 300px. Squarespace will resize them to show around 16px by 16px (this is mini mini!!) Interested to see how this compares to other Squarespace image sizes - read this.
How to Change your Favicon AKA how to change the little icon on your website
You’ve created a beautiful, simple Squarespace favicon. Sized it and saved it in the right file type ready to upload it. You’re nearly done. Here’s the step by step guide on how to add a favicon to your Squarespace site.
From your side menu head to “Design”
Select browser icon (this is another name for favicon)
Upload your browser icon (AKA favicon)
Hey presto and congratulations, you’ve added your Squarespace Favicon and you’re looking like a pro!
Found this helpful and want more like it?
Get Small Business, Web Design and Squarespace Tips straight to your inbox…
New on the ‘Gram…
