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!
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
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
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!
MORE SQUARESPACE VIDEO TUTORIALS
- How to disable the escape key login on your Squarespace website
- How to set up a blog on a Squarespace website
- How to add related posts to the bottom of Squarespace blog posts
- How to connect social media accounts to your Squarespace website
- How to easily find out which Squarespace template a website is using
- How to update and edit banner images in Squarespace
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!
Get started with the free email course and have your website up and running in no time!
Ever dreamed of launching your own Squarespace website, but aren't sure where to start?
This free email course will teach you everything you need to know!
Sign up now and get lesson one delivered straight to your inbox!