If you're anything like me, you dream about laser focus and working on one task at a time. However, if truth be told, you're a multi-tasker.

In my case, this shows itself all the time when I'm browsing the internet or doing work online. Take a quick look at my browser and at any given time I'll have at least half a dozen (if not more!) browser tabs open. It's a cluttered mess and it can be hard to keep track of all the websites I have open.

Here's where favicons come into play. Favicons are the small icon on each browser tab associated with a website and they're one of the quickest ways to tell websites apart when you have many tabs open. They're a way to fully distinguish and brand your website and they are a design element that should not be overlooked.

Not only are they super cute and useful, they're also incredibly easy to create and upload to your website!

I've created a short video tutorial to go along with this post to show you how easy it is to create a favicon using Canva and then how to upload it to your Squarespace website.

Let's get started!

Related: Canva video tutorials

Note: want to watch more of my Squarespace video tutorials? I've linked to them at the bottom of this post or you can head over to my Youtube channel to binge them now. #aintnoshame

How to design a favicon in Canva and upload it to your Squarespace website

In this video you will learn:

How to create a favicon in Canva
How to upload that favicon to your Squarespace website

Favicon 101

Before you dive into your favicon design, let's make sure you understand what they are and why they are important!

What is a favicons

Favicons are the small image associated with a URL that is displayed in a browser's address bar or next to the site's name in a bookmark list.

Favicons look professional

One of the easiest way to spot a newbie or amateur website is when they have a generic/default favicon instead of a customized design. Unless you customize the favicon field on in your Squarespace settings (or in your WordPress theme or hosting settings), the default favicon will automatically be displayed. This makes your site look less professional which is not the look you're going for.

Favicons are important visual elements

There's no doubt that favicons are part of a consistent and thorough branding. Establishing and maintaining a consistent brand is an integral part of any business and/or website's success so all design elements need to be taken into consideration. Favicons might be small but they are mighty : they play a part in branding and connecting your audience to your website. Favicons should be easily recognizable and instantly associated with your brand.

Favicons allow you to use Pinterest rich pins

Pinterest is a very powerful tool that can potentially drive a LOT of traffic to your website, so you want to make sure you have rich pins up and running (here's how to enable them). Pinterest rich pins help your pins stand out however unless you have a favicon in place, the default will display on Pinterest as well. This is a missed opportunity for branding and establishing recognition across other platforms.

Designing a Favicon

Designing a favicon is very easy and can be done in only a few minutes. In the video above, I've shown you how to create a simple favicon using Canva, a free online design tool. But before you design your favicon, there are a few things to keep in mind:

Proper favicon sizing

Favicons will display at 16px x 16px but Squarespace recommends that you size them between 100px x 100px and 300px x 300px.

Favicon file formats

Squarespace recommends that you save your favicon image in .png or .ico files. Note: some Internet Explorer (IE) versions might have trouble displaying a .png file so be sure to use Squarespace Analytics to make sure that most of your audience does not view your site with IE.

Recommended file size

Squarespace recommends that you do not exceed 100KB in your favicon image file. This shouldn't be hard if you stick to the recommended sizing dimensions

Favicon design best practices

The biggest thing to keep in mind when designing a favicon is that they are small! As such, keep the designs as simple as possible.

Favicons are best with a clean colour palette and very few details (e.g., text, lines, design elements, etc.). If you're not sure what to include in your favicon's design, aim for a simplified logo version, one or two letters (e.g., company's initials), a graphic that represents your brand, etc. Also, use transparency for any negative space in the favicon design instead of white space. This means that your design will display better on any coloured background.

How to upload favicon to your Squarespace website

If you watched the video above, you'll see how easy it is to upload your favicon to a Squarespace website!

Here are the steps:

Log into your Squarespace website. From the dashboard, go to Design > Logo & Title > Browser Icon (Favicon)
Click Add a Favicon and select your file to upload
Save your changes

If your favicon doesn't display right away, refresh the page or clear the browser cache

Final Thoughts

Favicons are little design elements that pack a lot of punch so be sure to create one and upload it to your website if you haven't already! Not only will it enhance your branding, it'll make it easier for users to identify your website when they have multiple tabs open. Favicons are also a sign of a professional and well-designed website so when you have a custom favicon installed, you're telling the world that you're a pro.

Be sure to watch the video above to see how easy it is to use Canva to create a favicon and get it uploaded to your Squarespace website today!

Now it's your turn to tell me about your website's favicon! Do you have one in place? What did you use to design it? I'd love to know so leave me a note in the comments!