How to add a favicon image to your Squarespace website

A favicon is the little image that shows up in your browser tab next to the page title.  If you’re like me and usually have about 20 tabs open, a favicon really makes the tab stand out as you can quickly recognise which website is hiding behind that tab.  They also appear when you favourite or bookmark a website. 

This is my favicon showing up on a tab in Google Chrome:

In Squarespace, if you don’t add a favicon you’ll see their standard grey cube favicon instead.  It’s not the most beautiful thing! Your favicon is another opportunity, albeit a tiny one, to show off your brand and to make sure that every instance of your website is on brand.

Adding a favicon is very easy in Squarespace: 

  1. Go to Design > Logo & Title > Scroll down to Browser Icon (Favicon) 
  2. Upload your favicon image file

A few things to note about favicons: 

  • They display at 16px x 16px which is obviously tiny but when you make your favicon it should be sized between 100px x 100px and 300px x 300px.  This size will work well across all browsers. If you need to resize the image that you’d like to use for your favicon, I’ve outlined a quick way towards the end of this blog post: How to resize your images for your website.
  • A .png file is best and the actual file size should be a maximum of 100KB. 
  • Safari doesn’t display favicons at all and Internet Explorer may be a bit glitchy displaying a .png file as a favicon.   So just use Chrome I’d say! 

And that’s it! 

Leave a Reply

Your email address will not be published.