How to Update and Size Your Squarespace Favicon
Sometimes it’s the little details that add up to make a website feel special. One of my favourite details to tweak is the favicon, the tiny icon that appears in the browser tab. It’s subtle, but it helps users navigate back to your website and build brand awareness!
If you’re using Squarespace, updating and resizing your icon is easy-peasy. Let’s chat about how you can create your own favicon (including the right size and shape) and upload it to Squarespace.
What is a Favicon?
A favicon is short for “favourite icon” because they were initially used in the favourites/bookmarks section of browsers! It’s the little image or icon that appears in the browser tab, next to the page title. It helps users quickly identify your website amongst several dozens of website tabs.
By default, Squarespace uses a grey cube as the favicon (dead giveaway!), but customising it to match your brand can make your site look much more professional.
An example of what a favicon looks like on Chrome
Step 01: Design and Size Your Squarespace Favicon
Before we get around to uploading your favicon, we need to design one. There’s a lot of designs out there for you to take inspiration from, and I love using Pinterest to search for clear and simple marks. Here are some best practices to keep in mind as you design and choose your Squarespace favicon size:
Dimensions
Squarespace recommends using a favicon size between 100x100 and 300x300 pixels, and I suggest going for the larger size. While desktop browser icons are typically resized to 16x16 pixels, there are other scenarios where you’ll need that larger size:
Mobile browser icons
Taskbar shortcuts
Desktop shortcuts
To reiterate, your favicon must also be sized as a square. If you do try to upload something that isn’t 1:1, Squarespace will squish or stretch it to fit, which is never a good look.
File Type
Use the .png formats, as this will allow you to have a transparent background behind the icons. No one likes a blocky white background!
File Size
Keep it under 100 KB. With a file size of 300x300 pixels , this should be pretty automatic.
Style
Your favicon should be a simplified version of your logo or a recognizable symbol. Avoid complex designs or text-heavy icons, as they won’t be clear at such a small size.
Browsers can be in light or dark mode, and Squarespace allows you to add a design for each! If your brand isn’t super bright or bold, make the most of this and create your favicon in two contrasting colours so you can stand out against white or black.
The favicon for Google in a transparent box with size dimensions in pixels
Shortcut the design process with an easy to use design tool like Adobe Express. Start with my free favicon template and enjoy trying thousands of icons and graphics. No subscription needed - just a free account!
Step 02: Upload your Favicon to Squarespace
Once you’ve download your favicon (ideally in two different colors!) then you’re ready to upload it to Squarespace. Follow these steps to update your browser icon:
In the Home Menu, click the Settings Icon.
Click Favicon.
Under Default, upload your darker favicon design.
Under Dark Mode, upload your lighter design, if you have one.
Click Save.
How to update the favicon in the Squarespace Settings
Why is my new Squarespace favicon not showing up?
Wondering why your new Squarespace favicon is not showing? Don’t worry, this is pretty common and usually occurs because your browser is still loading the older version of your icon. It’s trying to be quicker for you!
Here’s a few steps you can take to help resolve the problem and get your favicon to start showing up:
Refresh the Page: Sometimes, a simple page refresh can solve it straight away! Press Ctrl + F5 (Windows) or Cmd + Shift + R (Mac) to refresh the page.
Clear Browser Cache: Your browser might still be displaying the cached version of your site. Clearing your cache can force the browser to load the most updated content, including your new favicon. Here's how:
In Chrome, go to Settings > Privacy and security > Clear browsing data.
In Firefox, go to Preferences > Privacy & Security > Cookies and Site Data > Clear Data.
In Safari, go to Preferences > Privacy > Manage Website Data > Remove All.
Check Across Devices: Verify if the favicon appears on different browsers or devices. This can help determine if the issue is browser-specific.
Contact Squarespace Support: If your Squarespace favicon is still not showing after trying the above steps, it may be time to contact Squarespace Customer Support for extra help. They’re typically very supportive and have helped me solve issues on a number of occasions.
Conclusion
Updating and resizing your favicon in Squarespace is a quick trick to make your website feel more polished and less DIY! You can now easily replace the default grey cube with a custom favicon that truly represents your brand.
