Favicon for Squarespace: How to Add a Custom Icon and Fix Common Issues

Squarespace handles favicons differently than most website platforms. There's no code to write, no files to upload via FTP, and no plugins to install. You upload an image, Squarespace processes it, and your favicon appears across browsers and devices.

Sounds simple. And it is—until your favicon looks blurry, refuses to update, or displays perfectly on your laptop but vanishes on your phone.

These issues aren't your fault. They stem from how Squarespace processes and serves favicons behind the scenes. Understanding these quirks is the difference between a professional-looking browser icon and one that undermines your brand.

This guide covers everything: the standard setup process, the exact specifications for crisp results, the caching problems that make favicons seem "stuck," and advanced techniques for Squarespace users who want more control than the platform naturally offers.

How Squarespace Handles Favicons

Before diving into the how-to, understanding what Squarespace does with your uploaded image explains why certain problems occur.

When you upload a favicon through Squarespace's interface, the platform:

1. Accepts your original image — any common format works (PNG, JPG, GIF)
2. Resizes it automatically — Squarespace generates multiple sizes from your upload
3. Converts formats as needed — your PNG might become a different format for certain use cases
4. Serves it through their CDN — the favicon URL points to Squarespace's content delivery network
5. Generates Apple Touch Icons — mobile home screen icons are created from the same upload

This automation is convenient, but it means you can't control each size individually. If your design works at 300x300 but falls apart at 16x16, Squarespace won't let you upload a separate, optimized small version.

The platform also caches aggressively. Great for performance, frustrating when you're trying to update your favicon and the old one persists.

Adding a Favicon in Squarespace: Step by Step

The basic process takes about 60 seconds. Here's exactly how to do it, with the settings that matter.

Step 1: Access Site Settings

From your Squarespace dashboard:

1. Click Settings in the left sidebar
2. Select Site Information (in Squarespace 7.1) or Basic Information (in Squarespace 7.0)

The favicon option appears alongside your site title and description.

Step 2: Prepare Your Image Before Uploading

This step is where most people rush—and regret it later.

Squarespace recommends uploading an image that's at least 300x300 pixels. But here's what the documentation doesn't emphasize: the image must be perfectly square, and the design should fill most of the frame without touching the edges.

For best results:

• Dimensions: 512x512 pixels (gives Squarespace plenty to work with)
• Format: PNG with transparency if your design needs it, otherwise PNG or high-quality JPG
• Design: Your icon should have a small margin (about 5-10% on each side) but shouldn't be lost in white space
• Colors: Use your primary brand color prominently—small icons need high contrast

If your favicon includes text, reconsider. Text rarely survives the scaling down to 16x16 pixels. A letter or monogram can work; full words won't.

Step 3: Upload and Save

Click the Browser Icon (Favicon) upload area, select your prepared image, and hit Save.

Squarespace displays a preview, but don't fully trust it. The preview shows your image at one size—it won't reveal whether the 16x16 version looks acceptable.

Step 4: Test Across Browsers

Open your site in a new browser window (one where you're not logged into Squarespace). Check the tab icon. If it looks good, open your site on your phone and check there too.

Not seeing the new favicon? Keep reading—the troubleshooting section covers every scenario.

Squarespace Favicon Specifications That Actually Matter

Squarespace's official documentation is sparse on technical details. Through testing, here's what actually produces the best results.

Optimal Upload Dimensions

Uploading a 300x300 image works, but Squarespace upscales it for larger contexts (like Apple Touch Icons at 180x180), which can introduce blur.

What Squarespace Generates From Your Upload

From a single upload, Squarespace automatically creates:

• 16x16 favicon — classic browser tab size
• 32x32 favicon — higher-DPI browser tabs
• Apple Touch Icon (180x180) — iOS home screen icon
• Various intermediate sizes — for Android and other contexts

You don't control this generation process. Squarespace uses its own resizing algorithm, which generally performs well but can struggle with intricate designs.

Design Constraints to Accept

Because you're uploading one image for all sizes, certain design approaches simply won't work on Squarespace:

• Detailed illustrations — fine lines disappear at small sizes
• Gradients with subtle transitions — become muddy when compressed
• Text beyond a single letter — becomes unreadable
• Thin outlines — break apart at 16x16

The solution? Design for the smallest size first. If it reads well at 16x16, it will look even better at larger sizes. If you're starting with a complex logo, simplify ruthlessly.

Need help creating a favicon that works at every size? Try generating a few ideas with our favicon generator—it's designed to create icons that remain clear and recognizable even at tiny dimensions.

Fixing the "Favicon Not Updating" Problem

This is the most common Squarespace favicon issue, and it's almost always caching.

When you upload a new favicon, several caches can display the old one:

1. Your browser's cache — stores the old favicon locally
2. Squarespace's CDN cache — may serve the old file temporarily
3. Your DNS cache — rarely relevant, but occasionally a factor

Quick Fixes to Try First

Hard refresh your browser:

• Mac: Command + Shift + R
• Windows: Ctrl + Shift + R

Clear browser cache: In Chrome, go to Settings → Privacy and Security → Clear Browsing Data. Select "Cached images and files" and clear for "All time."

Try an incognito/private window: This loads your site without any cached data. If the new favicon appears here, it's definitely a browser cache issue.

If the Favicon Still Shows the Old Version

Squarespace's CDN can take up to 24 hours to fully propagate changes. But there's a trick to force a faster update:

1. Delete your current favicon entirely (click the "X" on the uploaded image)
2. Save the empty state
3. Wait 5 minutes
4. Upload your new favicon
5. Save again

This sometimes clears the CDN cache faster than simply replacing the image.

The Nuclear Option

If nothing works after 24 hours:

1. Rename your favicon file on your computer (even just adding a "2" to the filename)
2. Make a tiny, invisible modification to the image (adjust one pixel)
3. Upload this "new" file to Squarespace

Squarespace treats this as a completely new asset, bypassing cached versions.

Why Your Squarespace Favicon Looks Blurry

A blurry favicon typically means one of three things happened during Squarespace's processing.

Cause 1: You Uploaded Too Small

If your original image was under 300x300 pixels, Squarespace upscaled it for larger contexts. Upscaling always introduces blur.

Fix: Upload a larger source image (512x512 recommended).

Cause 2: The Design Doesn't Survive Scaling

Complex designs fall apart at favicon sizes. What looks perfect at 512 pixels becomes an indistinct blob at 16 pixels.

Fix: Simplify your design. Remove details that won't render. Thicken lines. Increase contrast.

Cause 3: JPG Compression Artifacts

If you uploaded a JPG (especially one that was already compressed), you're stacking compression. Squarespace compresses again, and artifacts multiply.

Fix: Always upload PNG for favicon source images.

Squarespace Favicon Limitations (And Workarounds)

Squarespace's simplicity comes with constraints. Here's what you can't do through the standard interface—and how to work around some of these limitations.

Limitation 1: No Per-Size Control

You can't upload separate images optimized for each size. Squarespace uses one image for everything.

Workaround: Design your single upload to optimize for the smallest size (16x16). Test it at that size before uploading.

Limitation 2: No ICO Format Support

Squarespace doesn't serve .ico files, which some older browsers prefer.

Workaround: This genuinely doesn't matter anymore. Modern browsers handle PNG favicons perfectly. The ICO format is legacy.

Limitation 3: No SVG Favicons

Squarespace doesn't support SVG format for favicons, which would enable perfect scaling and dark mode support.

Workaround: None through the standard interface. This is a platform limitation you'd have to accept or use code injection (see advanced section below).

Limitation 4: Limited Apple Touch Icon Control

You can't upload a separate, optimized Apple Touch Icon. Squarespace generates it from your favicon upload.

Workaround: When designing your favicon, keep in mind it will also be the iOS home screen icon. Ensure it works in both contexts.

Advanced: Custom Favicon Code in Squarespace

For Squarespace users who want more control, Code Injection offers a way to override the default behavior. This requires a Business plan or higher.

Adding Custom Favicon Code

1. Go to Settings → Advanced → Code Injection
2. In the Header section, add your custom favicon HTML

Here's an example that adds a standard favicon with additional Apple Touch Icon:

<!-- Custom Favicon Override -->
<link rel="icon" type="image/png" sizes="32x32" href="/s/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/s/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/s/apple-touch-icon.png">

Uploading Custom Files

Here's the trick for getting custom favicon files onto Squarespace:

1. Go to any page and add an Image Block
2. Upload your favicon PNG through the image block
3. Right-click the image and copy the image URL
4. Use this URL in your Code Injection

The URL will look something like: https://images.squarespace-cdn.com/content/v1/[site-id]/[random-string]/favicon-32x32.png

Not elegant, but it works.

Is Code Injection Worth It?

For most Squarespace users, no. The built-in favicon system works well enough. Code injection makes sense only if you:

• Need absolute control over specific sizes
• Want to implement SVG favicons
• Require different images for Apple Touch Icons versus browser favicons

If you're going to this level of effort, ensure your source favicons are properly optimized. Our favicon generator creates all the sizes and formats you'd need for a custom implementation.

Testing Your Squarespace Favicon

After uploading or changing your favicon, test across multiple scenarios.

Browser Tab Check

View your site in:

• Chrome (most common browser)
• Safari (especially if you have Mac/iOS visitors)
• Firefox
• Edge

The favicon should appear clearly in each browser's tab. If one browser shows it and another doesn't, clear that browser's cache specifically.

Mobile Check

On iOS:

1. Open Safari and navigate to your site
2. Tap the Share button
3. Select "Add to Home Screen"
4. Check if the icon looks professional alongside your other apps

On Android:

1. Open Chrome and navigate to your site
2. Tap the menu (three dots)
3. Select "Add to Home screen"
4. Verify the icon quality

Bookmark Check

Bookmark your site in a browser and check how it appears in the bookmarks bar or menu. This uses the favicon, and it's where customers often see it when returning to your site.

Squarespace Templates and Favicon Behavior

All current Squarespace 7.1 templates handle favicons identically—the template you choose doesn't affect how your favicon displays.

However, if you're using an older Squarespace 7.0 template, the settings location differs slightly:

• Go to Design → Logo & Title → Browser Icon (Favicon)

The functionality is the same; only the navigation path changes.

Frequently Asked Questions

What size should my Squarespace favicon be?

Upload a 512x512 pixel PNG image. This gives Squarespace the best source material for generating all required sizes. At minimum, use 300x300 pixels—anything smaller risks upscaling blur.

Why won't my Squarespace favicon update after I changed it?

Browser caching is almost always the cause. Hard refresh your browser (Command+Shift+R on Mac, Ctrl+Shift+R on Windows), try an incognito window, or clear your browser cache entirely. Squarespace's CDN can also take up to 24 hours to propagate changes.

Can I use a different image for my favicon and Apple Touch Icon on Squarespace?

Not through the standard interface. Squarespace generates your Apple Touch Icon from the same image you upload as your favicon. If you need different images, you'll need to use Code Injection (requires Business plan) to manually specify separate files.

Does Squarespace support animated favicons?

No. Squarespace doesn't support animated GIFs or other animated formats for favicons. The platform processes your upload into static images regardless of the source format.

My favicon looks fine on desktop but bad on mobile—why?

The image is being scaled to different sizes for different contexts. Mobile home screen icons display at 180x180 pixels, while browser tabs use 16x16 or 32x32. If your design is too detailed, it works at larger sizes but fails at smaller ones. Simplify your design and re-upload.

Making Your Squarespace Favicon Work Harder

A favicon seems like a minor detail, but it appears everywhere: browser tabs, bookmarks, mobile home screens, and even Google search results on mobile. For Squarespace site owners, getting this right means understanding the platform's automated approach and working within its constraints.

The key principles to remember:

• Upload at 512x512 pixels in PNG format
• Design for clarity at 16x16 pixels first
• Expect caching delays and know how to force updates
• Test across browsers and devices after any change

If you're struggling to create a favicon that works at Squarespace's required dimensions while remaining recognizable at tiny sizes, try our favicon generator. It's built to produce icons that look crisp at every scale—exactly what Squarespace's automated resizing demands.

Your browser tab is one of the first things returning visitors see. A professional favicon, properly implemented, signals that every detail of your site has been considered.