Every Squarespace site starts with a default cube favicon.
But what are they, exactly?
In this guide, you'll get a complete cheatsheet to update and optimize your favicon in Squarespace.
Some are quick tweaks in Squarespace 7.0.
Some are streamlined uploads in Squarespace 7.1.
Some use custom code for advanced control.
Some solve stubborn cache issues for sitewide consistency.
Some ensure your favicon looks sharp across devices and search engines.
Let's dive right in.
If you’re deciding which website builder best suits your needs, compare platforms in our Squarespace vs WordPress vs Wix comparison.
Understanding Favicons
What Is a Favicon?
A favicon (favorite icon) is a small, square image that displays next to your page’s title in browser tabs, bookmarks, and on mobile home screens. It’s a vital branding tool that makes your site recognizable in a crowded tab bar. According to Squarespace Support, adding a custom favicon ensures your site stands out from the default cube.
Why Favicons Matter
Favicons reinforce brand identity, improve user experience, and help visitors quickly locate your site among dozens of open tabs. A distinct favicon increases brand recall and adds a polished, professional touch to your pages.
Preparing Your Favicon Image
Recommended File Types
Squarespace supports PNG favicons up to 100 KB; ICO uploads are not supported. PNG is preferred for transparency and crisp rendering across browsers (Squarespace Support).
Dimensions and Size
Favicon images work best when sized between 100×100 and 300×300 pixels, though they display at 16×16 pixels. Keep file size under 100 KB for fast loading and wide compatibility.
Design Tools & Export
Use Adobe Photoshop, Illustrator, Sketch, or free services like Favicon.io and Real Favicon Generator to design and export your favicon.

How to Change Favicon Squarespace (Overview)
This section walks through the two main Squarespace versions—7.0 and 7.1—and an advanced custom code approach.
How to Change Your Favicon in Squarespace 7.0
- Log in to your Squarespace account and select your site.
- Navigate to Design > Logo & Title.
- Find the Browser Icon setting.
- Click Upload and select your favicon PNG file.
- Click Save at the top left.
- Refresh your browser to view the update.

How to Change Your Favicon in Squarespace 7.1
Squarespace 7.1 simplifies the process with a dedicated panel.
- From the Home Menu, click Design > Browser Icon.
- Drag and drop your PNG favicon or click to browse.
- Optionally, upload a dark-mode alternative after adding the default icon.
- Click Save and clear your browser cache.

Advanced: Custom Code Injection
For more control—such as serving multiple icon sizes or custom apple-touch icons—you can inject code directly into your site’s header.
Go to Settings > Advanced > Code Injection and paste:
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
Replace /path/to/
with your file URLs. For details, see Squarespace Code Injection.
Troubleshooting Common Issues
Favicon Not Updating
Browsers aggressively cache favicons. Force a refresh with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac), or clear your cache entirely.
CDN Propagation Delays
Squarespace’s global CDN can delay updates by 10–15 minutes. Ask colleagues in other regions to verify or wait briefly.
Verify with External Tools
Use online checkers like Real Favicon Checker or Favicon Validator to confirm correct deployment.
Best Practices for Favicons
Follow these tips to ensure your favicon is on-brand and SEO-friendly:
- Create multiple sizes: 16×16, 32×32, 48×48, 64×64, and 180×180 for Apple devices.
- Use a simple, high-contrast design for small-size readability.
- Keep file size under 100 KB to minimize load times.
- Test across browsers: Chrome, Firefox, Safari, Edge, and mobile.
- Remember: a well-designed favicon can boost click recognition in search results and bookmarks (Mailchimp Favicon Guide).


Conclusion
We’ve covered everything from preparing your favicon image to uploading it in Squarespace 7.0 and 7.1, using custom code injection, and troubleshooting cache issues. By following these steps, you’ll have a professional, on-brand favicon that works across devices and search engines.
Regularly review your favicon after site redesigns or rebrands to maintain consistent branding. A small icon can make a big impact on user experience and brand recall—don’t overlook it!