How to Add a Favicon in Squarespace: A 4-Step Guide [2026]
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!
