How to customize your Squarespace browser icon
Nothing says “DIY site” like the cube browser icon that displays on Squarespace sites. It’s easy to take a moment to customize it and create a custom touch that will set your site apart. Let’s explore how to do this…
What is a browser icon or favicon?
In your browser window, there is a little icon that displays next to your Site Name in the tab. The default one in Squarespace looks like this:
Adding a custom icon will make our site more recognizable when users have many tabs open, and will help our site stay on brand.
How to create your browser icon or favicon
First of all, the size of our favicon image is important. According to Squarespace: “Favicon images work best across all browsers when sized between 100px x 100px and 300px x 300px, though they display at 16px x 16px”. These images also need to be under 100KB and the ideal file type is a png (or transparent image).
You can use design software like Canva or many free tools that allow you to create a favicon. One that I can recommend is favicon.io.
Here is how to use favicon.io to generate a browser icon:
What should we have in our browser icon?
Ideally we would like some sort of graphic, symbol or text letters that relate to our website. Is there a graphic that you use on your website? Do you have custom typography that you could use to make a file of just your initials? You could also look for icons or graphics from many websites to see if there is something that relates to your brand. (see my list of websites to source for icons and graphics here).
What if you don’t have any graphics or branding that you can source for your browser icon?
Well, I have some workarounds for you. I often have clients that hire me for a Squarespace Design Day that have zero branding in place. In this case I take one of two approaches:
Method 1: I create a text icon using the fonts from the Site Title of the website
add a blank page (this is optional) and type the initials in a text box
change the text type to match the Site Title font setting (so Headings if Site Title is a heading font)
optionally you can change the color ot the text in the tool bar by selecting the text and then clicking on the colored circle in the toolbar and selecting the color you would like the text to be
Method 2: I create a graphic icon using a shape from the website
If the website already is using a shape block you can go to a page with the shape block and take a screenshot of the shape, cropping the screenshot in tightly
If there is not already a shape block, you can add a blank page and then insert a shape block from the menu
How to add a shape that you can screenshot for a browser icon:
Once you have your text or shape in place that you want to use, take a screenshot tightly cropping around the text. On a Mac this is Shift+CMD+4. You can use the spacebar to reposition before your release the keys.
Next, upload your screenshot file to remove.bg to make the image transparent and remove the background color.
I recommend renaming your file before uploading to make it something appropriate such as “Your brand name favicon.png”.
How to upload a custom browser icon in Squarespace
In your Squarespace site, to upload a browser icon, click on Settings -> Website and then select “Favicon” (or just press the “/” key and start typing “favicon” to jump to that page quickly).
Click on the + sign where it says “Add a favicon” to upload your image.
You can also create one that will show up on dark mode and upload that to the appropriate place on this page.
Click on “Save”.
Once you reload the website page you should see the new browser icon beside your Site Title!
Pin it for later
