How to Make and Upload a Favicon to Your Squarespace Website

How to Make a Favicon Using Canva and Upload it into you Squarespace Website

How to Make a Favicon Using Canva

and Upload it into your Squarespace website

Ever wonder why you need a favicon on your Squarespace site? Or better yet, wonder how to get that ugly little 3-D box on your Squarespace site to be branded for your own website? The small detail of your favicon and whether you have one or not can be crucial to how legit your site looks.

Let’s talk about how to create a favicon for your own Squarespace website and how to upload it onto your site!

What Is a Favicon?

A favicon is a little icon or image in your browser tab associated with the website. The purpose of it? So people can find the website they are looking for faster in their tabs, bookmarks, toolbars, etc.

Why Do you Need a Favicon on Your Squarespace Site?

Having a favicon gives people a shortcut to come back to your website. It makes you easy to find again. Which is something you want if you want to make sales in business.

Having a favicon makes your Squarespace website look more professional and trustworthy. The details are what makes a brand. A favicon is a detail of your brand. Images or icons are more memorable than a name. Think of it like how you use the app images on your phone to find the app you are looking for. It’s quicker and easier than searching for the name of it.

How to Make a Favicon for Your Squarespace Website

Over here at Carbon & Clay Design Co. We use Canva just about every day! It is a great design tool for designers AND non-designers. If you do not have an account with them, you can sign up for a free account today. (No, we are not sponsored by them, we just really love them! Promise.)

To make the process easier and more visual (which we are all about over here and C & C), we created a short video tutorial for you to see some examples of favicon creations and how to quickly make yours too.

Using Canva to Design your Squarespace Favicon

  • Click Create a Design button to create a square blank canvas of 100px by 100px

    Favicons are usually 16 by 16 pixels. SUPER SMALL. But one of the great things about Squarespace is the ability it has to resize images you upload to your website to the right size it needs to be - including your favicon. 

You could really create any size square you want for your canvas, however, Canva.com will not let you go below 40px … so 16px by 16 px is out of the question. 

The reason why we suggest working in a 100px by 100px canvas is simply that it is easier to see when you are creating but also not so much bigger than the actual file size that it will be too big to upload into Squarespace and let it do it’s magic resizing thing.

  • Create a SIMPLE icon that has some resemblance to your website logo.

    It needs to be really simple. A piece of your logo or something that resembles it. Words will not read well in it. The most letters we suggest using in your favicon are two. For example, you could pull the initials from the name of your business into your favicon design. It could be a simple shape from your logo or the icon in your logo standing alone.

    Make sure your design spans the whole width of the canvas since it will be a very tiny 16px by 16px icon in the corner of your browser tab.

    At Carbon and Clay, we use the two C’s from our name in a simple box colored one of our brand colors.

  • Download the design as a . PNG.

    If you have a paid Canva account, you can create a transparent PNG. Otherwise, there will be a white box around your favicon, which will work just fine too.

How to Add Your Favicon to your Squarespace Website

  1. Log in to your Squarespace account and click on the website you want to upload your new favicon to.

  2. Click the gear icon on the bottom of the menu to the left

  3. Click on Favicon

  4. Click on the upload arrow, find your favicon file on your computer, and click open.

  5. Once it uploads, click Save at the top left of the screen.

Note: You will need to refresh your page to see the new favicon in your Squarespace website browser tab.

And there you have it! A simple branded browser icon for your Squarespace website!


Not sure if your brand is up to standards?

Our DIY brand building course, Styled to Thrive, will teach you how to build a professional and timeless brand in just a weekend.

Previous
Previous

Calm and Soothing Squarespace Website for Spa and Salon

Next
Next

Rich and Cozy Squarsespace Website for Virtual Counselor