How to Replace the Default Squarespace Browser Icon
If you use Squarespace, you’re probably familiar with the little grey cube that shows up in your browser tab by default. Did you know you can replace this with your own icon?
Why replace the default browser icon?
In short, replacing the default browser icon with your own makes your site more recognizable and professional.
When folks are searching for answers and your website appears in search results, they’ll see your browser icon. A custom icon helps you stand out and differentiates you from other Squarespace sites.
Also, If people save your website in a bookmark, your favicon will help them pick your website out from a list more easily.
Here’s how to replace the default Squarespace favicon with your own:
Step 1: Create a favicon
Start with a small, square document (100×100px) in your design platform of choice.
Create a simplified version of your logo, or use a single element from your logo as an icon. If you work with a Brand Designer, they can create a custom favicon for you.
Pro Tip: Zoom way out to shrink your design in order to see how your favicon will look (this icon will appear very small, so it should not contain much detail at all).
Step 2: Save your favicon file
Download your design file as a PNG with a transparent background (so that regardless of visitors' browser color theme, your icon shows up as intended).
Step 3: Upload favicon to Squarespace
Open your site editor.
Click “Settings” > Website > Favicon.
Upload your file under “default favicon.”
Click “Save”.
Refresh your page and the default Squarespace cube should* be replaced with your custom image.
*If you still see the grey cube, open your website from a new browser window or clear your cache.
Optional: Upload an alternate favicon for browsers in dark mode*
If your favicon is black or grey, your favicon may not show up well on browsers using dark mode. In this case, it may be a good idea to upload an alternate version of your favicon in a lighter color. Here are the steps:
Create another favicon file (in Canva or otherwise) in a lighter color, and download the file as a PNG with a transparent background.
Head back to Squarespace (Settings > Website > Favicon) and upload this file in the alternate favicon field.
Now, when your website is being viewed in a browser using dark mode, your alternate favicon will show up!
*This step is not necessary if your favicon uses a color that shows up well against both light and dark backgrounds.
Need help designing a custom logo or favicon?
Book a Design Day with Hold Space Creative to get your very own logo suite, brand system, or favicon to distinguish your brand online.
