How to Create a Favicon for Squarespace using Canva
More of a visual learner?
WATCH THE VIDEO BELOW.
Grab my free 3 day video email course: FINDING YOUR BRAND COLOURS
Want to learn what a Favicon is, why you need one for your squarespace site and how to create it in Canva? Then this tutorial is for you! (Click here for a Favicon tutorial using Figma)
What is a Favicon
A Favicon is the little icon in the website tab at the top of your browser. So when you have loads of tabs open, which most people do, it's a really great way of catching people's attention back to your page.
People get really distracted in this day and age, and it's really, really important to bring them back. So many websites I see do not have anything up here, and I just lose it and I have to find it again because I'm one of those people with loads of tabs up!
An example of the Squarespace Favicon
How to Create a Favicon using Canva
A favicon is 128 x 128 pixels - yes, it’s very small!
Now your whole logo or even logo mark will be too complicated for this small favicon. So take an element from your logo then make it stand out. So the simpler, the better. The bolder, the better. The more contrast the better.
An example of a design process simplifying from a logo, to a word mark to a favicon
I’m going to take you through an example process of creating a Favicon that is simply a circle against a plain square background.
Start with a new Canva project and custom size it to 128 x 129 pixels.
Edit the background colour in the top edit menu and selecting it from your brand kit or upload the HEX code into the canva colour customiser.
Select ‘Circle’ from elements and make the circle colour your other or secondary brand colour. You can choose whether your primary brand colour is the circle or the square background. Up to you with what looks best and stand out the most!
Export your favicon by goign to ‘Share’ in the top right hand corner and exporting as a PNG.
Uploading your Favicon Into Squarespace
Starting from the home page of editing your website in Squarespace click Design > Browser Icon > Add Browser Icon. Now you’re done!
If your Favicon does not show in the tab immediately, refresh your page. If it still doesn’t show you need to clear your cache.
Amy Ilic
Squarespace Designer & Brand Conjuror
