Adding a Browser Icon (aka a Favicon) to Your Website
Actual question I was recently asked:
“What is the little thingy next to my website name in my browser and how do I get one?”
This is an awesome question! And it’s one of those things that I take for granted, that is (understandably) not obvious to my clients.
So today we’ll talk about how to get one of those “thingies” (aka Browser Icon, aka Favicon) and I’ll provide a free Canva Template so you can make your own (and a video showing you how to install it).
Do I need a browser icon on my website?
Great question! A browser icon is an extension of your brand. And when it comes to Search Engine Optimization (SEO) the concept of “Brand Authority” has become an increasingly important metric.
Have you noticed that when you search on Google, browser icons are now shown next to the page title?
It also a way to have your site look more professional and polished (even if you’ve done it yourself).
This video walks you through how to add a browser icon to a Squarespace website.
It also covers how to use the Free Canva Browser Icon Template!
Not a video person? Here are the steps to adding a browser icon to Squarespace written out!
Create your browser icon/favicon (either in Canva or elsewhere). Good dimensions for it are around 500 x 500 px (Squarespace says 300 x 300px but I find up to 500px is fine as long as it’s a very simple image and this way it comes out super crisp) and the file size needs to be less than 0.1 MB or it will not load.
Login to your Squarespace account.
Click Settings -> Website -> Favicon
Click “Add Favicon” and it will prompt you to choose a file from your computer to upload.
NEW: You can also install a version of your favicon that will show up if your browser is in “Dark Mode” (if your favicon doesn’t have a light or bright background color this is a good idea).
Click Save.
