How to Change the Squarespace Browser Icon (with video)
How to change the browser icon (favicon) on your website in Squarespace?
*Update 8/7/23: After I recorded this video, Squarespace changed things around a little and removed the âDesign; section. Now youâll find the browser icon under the âSettingsâ tab.
In this guide, Iâll walk you through the process of changing the Squarespace icon for your website. The Squarespace icon is also known as the browser icon or favicon. Squarespace automatically includes a little black box (or, square), and youâll see this on anyoneâs website who doesnât know how to change that out for their very own logo or design.
Iâve included a handy-dandy infographic for you to save (at the bottom of this post), as well as this quick 50 second video tutorial:
Step 01: Prepare your resources
Find or create an image or logo that represents your brand - Canva is great for this.
What size should a Squarespace favicon be?
Youâll want it to be high-quality, and if itâs transparent, preferably a PNG file.
The optimal size for a browser icon is 250 x 250 pixels.
Tip: Use high-contrasting colors to make it stand out
Step 02: Access the Squarespace Editor
Log in to your Squarespace account and navigate to the website editor on the left-hand side.
Step 03: From the Design Section, find the Site Identity or Logo Section
In the website editor, locate the Design section.
From there, click on âBrowser Iconâ (Favicon).
Step 04: Upload the New Icon
Click on the option to upload a new icon image.
Select the image or logo you prepared in Step 1.
Step 5: Preview and Save
Preview the changes you made to ensure the icon appears as you intend. Make any desired changes. Sometimes it takes a bit of tweaking to make sure the colors, size and overall aesthetic feel right to you - so donât worry if it takes you a few times, especially as youâre just getting started. :)
Once youâre happy, save the changes to finalize the new Squarespace icon.
