How to Create a Custom Squarespace Favicon (Browser Icon)
Table of Contents
Step 1: Create a favicon + best practices
A favicon, or browser icon, is a small image that appears on a browser tab. When a user has several browser tabs opened, these little icons help them quickly recognize and navigate to the tab they need.
Squarespace sites by default use a grey cube as the favicon. You might have come across websites with this symbol. This default favicon spoils the fact that your site is DIY and makes your brand looks less professional, so it’s a must to change.
The good news is creating a custom favicon takes just a couple of minutes.
Follow the steps outlined in this post to create and add a custom favicon for your Squarespace website. Let’s replace the sad grey cube with something unique for your brand, shall we?
Before we get into the nitty-gritty of creating a favicon, it’s important to know the best practices.
Though the optimal favicon dimensions are 16px x 16px, Squarespace recommends using an image size between 100px x 100px and 300px x 300px. Additionally, favicon file should be either an .ico or .png and the size can’t exceed 100 KB.
Because favicon is displayed at such a small size, it should be the symbol or a simplified version of your logo, or the first letter of your brand. Don’t use complex icons or having multiple letters in your site favicon.
To make the favicon recognizable, it should use your brand color and/or logo font. Additionally, since the browser tab background color will be either grey and white, use a bold, high-contrast color to make your favicon stand out and avoid using pastel colors.
For example, Canva’s logo is white on teal, but they use a dark blue gradient for their favicon which makes it’s much more eye-catching.
You can use a favicon generator tool to create a simple favicon without any design skills. Following are the steps:
Head over to favicon.io/favicon-generator
Enter the information to customize your favicon design, including the first letter of your brand name, the shape of your favicon, font, and color.
Check the preview and when you’re happy with the design, click Download.
From the downloaded folder, find a file with a dimension larger than 100x100 and smaller than 300x300. This will be used for your Squarespace favicon.
If you want to add unique symbols to the favicon, Canva is a beginner-friendly graphic design tool where you can create a favicon from scratch. What’s great about Canva is they have thousands of free icons ready to use. Check out this video to learn how to create a favicon in Canva.
Log in to your Squarespace account and follow these steps to change your site favicon:
From the Home Menu, click Design, then click Browser Icon
Click the upload button to choose a file from your computer
Click Save.
If you have an older Squarespace website (version 7.0), the steps are slightly different. From the Design menu, you will click Logo & Title. Then scroll down to Browser Icon (Favicon), upload the image, and click Save.
Once you’re done, open your website from another tab to see how the new favicon displayed. You may have to refresh the page a couple of times to see the update.
If the new favicon is not updated after you’ve refreshed the page a couple of times, check to make sure your image file follow the guidelines:
Dimensions between 100px x 100px and 300px x 300px
File type either .ico or .png
File size doesn’t exceed 100 KB
If everything is correct, try clearing your browser’s cache.
Basically, your web browsers save files when you visit a website to make that site load faster the next time you visit it. By clearing your browser’s cache, you force the browser to load the most updated site content, including the new favicon.
You can try loading your website from other browsers or devices and if there’s only one place where the favicon doesn’t get updated, this’s most likely the issue. In that case, refer to this page for instructions to clear cache for different browsers.
If that still doesn’t work, you can contact Squarespace Customer Support and they will help you troubleshoot the specific issue your site might have.
That’s all you need to know to add a Squarespace browser icon. Go make your website stand out with a unique favicon!