How to Change Favicon Squarespace: Complete Step-by-Step Guide

By on

An example favicon design grid showing 16x16, 32x32, and 64x64 versions.
How to Change Favicon Squarespace: Complete Step-by-Step Guide

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.

An example favicon design grid showing 16x16, 32x32, and 64x64 versions.

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

  1. Log in to your Squarespace account and select your site.
  2. Navigate to Design > Logo & Title.
  3. Find the Browser Icon setting.
  4. Click Upload and select your favicon PNG file.
  5. Click Save at the top left.
  6. Refresh your browser to view the update.
Screenshot of the Squarespace 7.0 Logo & Title panel showing the Browser Icon upload button.

How to Change Your Favicon in Squarespace 7.1

Squarespace 7.1 simplifies the process with a dedicated panel.

  1. From the Home Menu, click Design > Browser Icon.
  2. Drag and drop your PNG favicon or click to browse.
  3. Optionally, upload a dark-mode alternative after adding the default icon.
  4. Click Save and clear your browser cache.
Illustration of the 7.1 Browser Icon panel with upload area highlighted.

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).
Side-by-side examples of good vs. bad favicon designs at 16x16 pixels. Flowchart showing how a favicon appears in browser tab, bookmark, and mobile.

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!