How to Add a Favicon in Squarespace: A 4-Step Guide [2024]
A favicon (sometimes called a browser icon), is a small icon displayed in a browser's tab next to the website’s title, and it helps users quickly identify and locate a website among multiple open tabs.
This is great for both brand recognition and user experience, and best of all - it’s super easy to add! Here's how to do it in Squarespace in four easy steps.
Step 1: Opening the Squarespace settings menu.
To get started, log in to your Squarespace account and open your site. On the left menu, on the bottom, click the settings icon.
Next, in the “Website” tab, locate and click on the “Favicon” option.
Step 2: Upload your favicon.
Inside of the “Favicon” section, click on the top “Add a favicon” option to upload your icon from your computer. It’s best practice to use a shorthand version of your logo here, as it remains legible even when displayed in the small space of the browser window.
Pro tip: For the best result, Icons should be in PNG file format and recommended sizing is between 100 x 100px and 300 x 300px. Learn more about this from the official Squarespace article.
Step 3: Upload your dark mode icon (optional).
You’ll notice there’s also an option underneath the default Favicon for a “Dark mode” version.
This is an alternate version of your icon you can use on browsers when the user is viewing in dark mode. For example, if your icon is black and the user’s browser is in dark mode, this may be difficult to read.
In most instances, if you use your brand’s primary color (such as blue for my own), then it will not be necessary to add a “Dark mode” version.
Step 4: Save and preview your changes!
After uploading your icon, remember to save your changes by clicking “Save” in the top right of the menu.
Next, open your site up in a new tab and make sure you can see your new icon on your Squarespace website. Sometimes this can take up to 48 hours to update.
If your icon looks as expected, congratulations! You have successfully uploaded a Favicon on Squarespace 7.1.
5 benefits of using a Favicon on a Squarespace site:
1. Brand Recognition
A favicon reinforces your brand identity, making your website easily recognizable among many open tabs.
2. Professional Appearance
A favicon adds a level of professionalism and polish to your Squarespace website, demonstrating attention to detail.
3. Improved User Experience
Favicons help users quickly locate your Squarespace site in their bookmarks or browser history, enhancing navigation and usability.
4. Increased Trust
A well-designed favicon can build trust with visitors, as it shows that you care about all aspects of your Squarespace website’s presentation.
5. Cross-Platform Consistency
Favicons ensure your Squarespace website’s brand is consistently represented across different devices and platforms, from desktop browsers to mobile devices.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
