How to Create a Favicon for Squarespace using Figma

webdesign

Dec 15

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 in Squarespace site and how to create it using Figma? Then this tutorial is for you! (Click here for a Favicon tutorial using Canva)

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 Figma

Figma is a free collaborative web application for interface design and you can create your Favicon using it.

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.

So you want to create a square using the rectangle tool that is accessed from the top tool bar. In the right hand design panel you then need to resize it to 128 x 128.

Edit the colour of the square by changing the ‘Fill’ in the right hand side design pane. It is definitely easiest here to simply paste your brand colour in as a HEX code.

Adjusting the colour of your shapes in figma.png

Add in a circle from the top toolbar by clicking on the square icon and selecting ‘Ellipsis’ from the drop down menu. Hold down shift as you drag to create your circle in order to keep the width and the height the same. Without doing this your circle will become an oval!

Centre the circle within the square using the ruler guidelines and change the fill colour to your desired brand colour.

Next we need to group the items by dragging our cursor over the square and circle, right click then select group selection from the option menu that appears.

Right click the favicon design again and this time select ‘Outline Stroke’. The design is now one combined icon!

Whilst the favicon is selected, navigate to the right hand side design panel and add the bottom change the export file to PNG and click ‘Export’