How to add a favicon (browser icon) to your Squarespace website
Are you wondering what a favicon is? You’ve definitely seen them before, but just may not have known what to call them.
A favicon or browser icon is that little image you see in your browser tab next to the web page title. It started out as a way to show your bookmarked pages or favourite page – so, favourite icons or favicons.
Now, it no longer matters whether your page is bookmarked. Browsers show favicons for every page that has one and shows a generic browser icon for pages that don’t. Both Squarespace and WordPress have a favicon that shows for websites that haven’t added one of their own. Squarespace has a little grey square and WordPress shows a blue and white letter W.
Where do you see favicons?
Besides the browser tab, favicons are seen in several places:
Your bookmarks
Your browser history
The search bar
Google search results
Favicons shown here in two places - the browser tab and the search bar.
Why are favicons important?
“Okay”, you’re thinking to yourself, “they’re pretty and all, but do I really need one?”
Favicons do more than pretty up your site. Here are a few reasons you should have one on your website:
Favicons build brand awareness
Favicons are like tiny little logos (they may actually be a tiny version of your logo), that represent your brand. And luckily, it’s easy to get these icons seen multiple times through browser tabs, bookmarks and more. This repetition helps your visitors to remember your brand and link it to your business.
They help to improve your user experience
Yes, I’m one of those people who always has a kajillion tabs open (I know, I’m trying to get better). So, for people like me, favicons are super helpful. I can easily go back and forth to different tabs to get the information I need simply by finding the right little icon.
Favicons make your website look more professional
When I’m searching through the internet and come to a site with the Squarespace grey box or WordPress W, I always think it makes the website look unfinished. It’s as though they did everything up to a certain point and gave up.
Having a favicon makes you look like a business that cares about the details. It makes you look more credible and professional.
How do you add a favicon to a Squarespace Website?
First, you’ll need to create a favicon. Favicons are displayed as 16px by 16px, which is really tiny. So, you need to think about how your favicon will look when it’s that small. A really detailed picture is hard to see when it gets squished into that size.
Some businesses use their entire logo as their favicons. Others, including mine, use only part of their logo.
You can have your logo designer or web designer create one for you. Or you can make one in Adobe Illustrator, Canva or a web program like favicon.io.
Squarespace Favicon Requirements:
PNG file format
Size: Between 100px × 100px and 300px × 300px (square image)
Up to 100 KB
Add a favicon to Squarespace 7.1
From the Main Menu/Home panel click on Design
Click Browser Icon
Click the Plus Sign (+) to upload your favicon
After your image uploads, click Save
Add a favicon to Squarespace 7.0
From the Main Menu/Home panel click on Design
Click Logo & Title
Scroll down to find Browser Icon
Click the Plus Sign (+) located above add a favicon
After your image uploads, click Save
Why don’t I see my new favicon in my browser tab?
Sometimes, it can take a little while to see your new favicon as your browser is holding on to the old one. First, give it a few minutes to once you’ve hit save. Then refresh your page. Finally, you may also want to try clearing your cache.
I also sometimes try a different browser to see if the favicon is working. If it’s up in Firefox, but hasn’t yet changed in Chrome, I know that it’s only a matter of time.
Now that you know how to do it, go ahead and put that finishing touch on your website. I can’t wait to see it!
Get more tips!
Want more great content like this? Get all the latest news, updates, tutorials, discounts and tips about Squarespace, Web Design, SEO and more.
Sent out once a month, so I don’t clog up your email!
