How to add a favicon to Squarespace 7.0 & 7.1
Adding a favicon to your Squarespace website is easy and I’ve got a super quick video tutorial about it for you today!
Watch the video or read the transcript to see how to add a favicon to Squarespace 7.0 & 7.1.
VIDEO TRANSCRIPT:
How to add a favicon to Squarespace 7.0 & 7.1
Welcome back to my channel. In today's video, I want to show you how you can design a favicon for your website and then add it to your Squarespace website.
So basically, what is a favicon?
It's that small icon that shows up in the browser window when you open up a website. So Canva has a circle with their C. Squarespace has their little cube. Here's mine — mine's a floral wreath with my initial in it and I'm going to show you how you can add favicon to Squarespace 7.0 and 7.1.
How to design a favicon in Canva
So basically first, we're going to go to Canva and then we're going to click on create a design. We're going to search for logo and you're going to select a blank screen. So if you already have a logo, my recommendation is to take just one element of your logo and make it your favicon.
This can be like a - just a symbol, it can be a letter, it can be a letter in some sort of a frame like a circle or square frame — basically just one small element of your logo.
It does not need to be your entire logo because it will become practically unrecognizable so you want to stick with something simple and icon like in nature.
So let's say that I want to make a favicon for my site that's called Ley Design Studio (which happens to be my business name but it's not my domain name)
So I'm going to click on text and I'm going to click on add heading and then I'm just going to type in the letters L and D. I'm going to make it really big and then I'm going to make sure it is centered.
And then you can change the font. So let's say I want Montserrat and I want the bold size or the bold weight so i'm going to go with extra bold. I'm going to reduce the size to 180 and see what happens.
Okay and now we need to reposition it and make sure it's centered and that looks good. And then we're going to download it. So when you go to download your logo (favicon!), If you don't have Canva pro, I recommend that you go ahead and upgrade. iIt's free for 30 days — this will allow you to download the favicon without this white background. So I'm just going to hit download and make sure it's is saved as PNG.
And like I said — you want to make sure that it's downloaded with a transparent background and then you're going to hit download.
Uploading a favicon to Squarespace 7.0
Now I already have a favicon design so that's what I'm going to use. So basically, if you're working with Squarespace 7.0 to upload the favicon, you're going to go to Design > Logo and Title. And then you're going to scroll down, find this browser icon or favicon section, and you're going to upload the image there. Once you upload your favicon, just click on save and refresh the page and then your favicon will be visible in the browser window.
Uploading a favicon to Squarespace 7.1
On Squarespace 7.1, which is the latest version of Squarespace, you're going to go to Design > Browser icon and add your favicon and then I'm going to click save.
And let's refresh — sometimes you might need to switch to a different page to get it to update like I just did but basically now you can see the favicon has been updated.
So yeah, in case it doesn't work, just try switching around to a different page, refresh the page a couple of times, and make sure to visit it in incognito mode and refresh it there so that it updates in your browser.
That's basically it — that's how you add a favicon to your Squarespace website!
If you like this video I would appreciate it if you subscribed to my channel and gave me a thumbs up so that I know to create more videos like this. And if you're interested in creating your own Squarespace website, I have a free website roadmap that you can download by signing up below.
