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:
- Go to Design > Logo & Title > Scroll down to Browser Icon (Favicon)
- 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!