How to add a favicon to your Squarespace website
What even is a favicon?!
Fav-icon or Favi-con, honestly I’m never totally sure how to pronounce it but basically it’s that little icon that sits in the web browser when your website is open. It also sits alongside your website listing when it shows up in search results.
It’s a brilliant way to create brand recognition and show people you are a legit, trustworthy business.
If you don’t have a favicon, you’ll instead have the generic Squarespace website black box icon. And nothing screams DIY like that little Squarespace icon.
What makes a good favicon
Your favicon needs to be super simple and recognisable at a very small scale. Your favicon is teeny tiny so simplicity is key. You also want to make sure it uses high contrasting on brand colours.
Logo Mark - If you already have a logo mark, brilliant, use that. A logo mark is an icon or symbol that represents your brand… think instagram’s camera, nike’s swoosh or apple’s apple. Something that is instantly recognisable.
Visual Icon - if you don’t have a logo mark, look to your branding - are there any elements that you can pull from there to create a nice minimal favicon? Any shapes or stand out parts of the design that you can pull from?
Textual - Another great option is to take the first letter of your business name and create a high contrast simple icon. This is a pretty fail safe option and works well.
If you’re struggling to come up with ideas for your Squarespace favicon, have a look at other websites for inspiration.
Here are a few that I’ve made for Squarespace website’s I’ve designed.
How to make your favicon in canva
I usually make my favicons in adobe illustrator but you don’t have access to it, you can easily create your favicon in Canva using the free version.
Create a new custom size design, making it 100 x 100 px. Upload your design (or design it in Canva if you prefer) and scale the design to fill the artboard. Download the design as a .png file type and click the option to download with a transparent background. Boom. You now have a favicon!!!
Note: Your Squarespace favicon file size can’t exceed 100kb file size. But it should be way below this size using the above method.
How to add your favicon to Squarespace
It’s super easy and only takes 5 mins to update your Squarespace favicon…
Login to the backend of your website & click settings
Navigate to settings > website > favicon
Upload your favicon and sit save.
And that’s it. See, I told ya it was easy.
Troubleshooting: what to do if you can’t see your favicon.
If it’s your first time uploading a favicon, it ‘should’ and usually does show up right away but if you’ve uploaded multiple different favicons, it sometimes shows an old version rather than the new one you’ve added. If this happens, try clearing the cache and then restarting your browser. For some reasons, browsers like to cling on to old versions of the favicon. I don’t know why!!
If it’s still not showing… try looking at your website in a different browser or an incognito tab… chance are that it is showing, it’s just not showing in your current browser.
Written by a human, not a robot.
All my blogs are ai free and written by me, Ishbel, a real life human living in Glasgow.
