How to Change the Squarespace Icon
How to change the little icon of 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 satisfied, save the changes to finalize the new Squarespace icon.
Congratulations! 🥳
You have successfully uploaded or changed the Squarespace icon for your website.
