What File Format and Size Works Best for Favicons?

The preferred formats are PNG or ICO. PNG is recommended for its support of transparent backgrounds. Ensure the file size is under 100 KB (0.1 MB), as Squarespace will reject larger files during the upload process.

How Long Does It Take for a New Favicon to Appear in Search Results?

While it appears on your site almost instantly, search engines like Google may take several days or even weeks to update the favicon in search results. You can speed this up by requesting a reindex of your homepage through Google Search Console.

How to Change The Favicon on Squarespace

Q: What Is a Favicon in Squarespace?

A favicon, or browser icon, is the small square image that appears in browser tabs, bookmarks, and mobile search results. By default, Squarespace sites display a dark gray cube, which can be replaced with a custom icon to improve branding and professionalism.

Q: What Size Should a Squarespace Favicon Be?

Squarespace recommends an image sized between 100x100 pixels and 300x300 pixels. While browsers display the icon at 16x16 pixels, using a larger square source file ensures the icon remains crisp when scaled by different devices.

Q: Why Is My Squarespace Favicon Not Showing?

The most common reason is browser caching. Browsers often 'remember' the old favicon to save loading time. To fix this, clear your browser cache, use an incognito window, or try a hard refresh (Cmd+Shift+R on Mac or Ctrl+F5 on Windows).

Q: Can I Have Different Favicons for Light and Dark Mode?

Yes. Squarespace supports a dark mode alternative for favicons. This allows you to upload a lighter-colored version of your icon that automatically displays when a user has their browser or system set to dark mode, ensuring visibility against dark backgrounds.

Q: Where Do I Find Favicon Settings in Squarespace 7.1?

In Squarespace 7.1, log in and navigate to Asset Library, or go to Settings > Website > Browser Icon. Alternatively, you can search for 'Browser Icon' using the shortcut key ( / ) in the Home menu.

Q: Where Do I Find Favicon Settings in Squarespace 7.0?

In Squarespace 7.0, navigate to the Home Menu, click 'Design,' then select 'Logo & Title.' Scroll down to the 'Browser Icon (Favicon)' section to upload your image.

Q: What Happens If I Do Not Upload a Custom Favicon?

Your site will display the default Squarespace cube icon. This can make a site appear 'DIY' or unfinished. A custom icon helps visitors distinguish your tab when they have multiple websites open at once.

Q: Can I Use My Logo as a Squarespace Favicon?

Yes, provided the logo is simple. Detailed logos often become a 'blur' at 16x16 pixels. For best results, use a 'submark'—a simplified version of your logo, such as a single letter or a core brand symbol.

Summarize this article with:

ChatGPT Claude Perplexity Grok

That generic Squarespace cube in your browser tab? It screams “I didn’t finish setting up my website.”

Learning how to change favicon on Squarespace takes less than five minutes and instantly makes your site look more professional.

Your favicon appears in browser tabs, bookmarks, and Google Search results. It is a small but visible piece of your brand identity.

This guide walks you through the complete process for both Squarespace 7.0 and Squarespace 7.1.

You will learn how to access the favicon settings, upload your custom browser icon, add a dark mode version, and fix common display issues.

How to Change Favicon on Squarespace

Changing your favicon on Squarespace is the process of replacing the default browser icon with a custom image that represents your brand.

This small square icon displays in browser tabs, bookmarks, and Google Search results.

Users need this when building a new Squarespace website, rebranding an existing site, or removing the default Squarespace cube icon that comes with every new site.

This guide covers 4 steps requiring 2 to 5 minutes and a Squarespace account with an active website.

Prerequisites

Before uploading your custom favicon, gather these requirements:

Is Squarespace still gaining ground?

Explore the newest Squarespace statistics: market size, user demographics, revenue insights, and design trends powering the platform.

Check the Numbers →

Active Squarespace account (version 7.0 or 7.1)
Custom favicon image in PNG format
Image dimensions between 100×100 and 300×300 pixels
File size under 100 KB
Square aspect ratio (1:1)
Basic familiarity with the Squarespace dashboard

Your browser icon file works best with a transparent background.

Squarespace accepts PNG and ICO formats, though PNG is recommended for better results across Chrome, Safari, and Firefox.

Step One: How Do You Access the Favicon Settings in Squarespace?

Open your Squarespace dashboard and click the Settings icon at the bottom of the left menu.

The favicon panel location differs slightly between Squarespace 7.0 and Squarespace 7.1.

Squarespace 7.1 Path

Settings > Website > Favicon

Click directly on the Favicon option in the website settings section.

Squarespace 7.0 Path

Design > Logo & Title > Browser Icon

Scroll down to find the Browser Icon section within the Logo & Title panel.

Quick Access Shortcut

Press the slash key ( / ) on your keyboard from anywhere in the site editor.

Type “Favicon” and hit enter to jump directly to the favicon settings panel.

Step Two: Where Do You Upload Your Custom Favicon Image?

The favicon panel displays an image uploader with a plus sign (+) icon.

Click this area to select your favicon file from your computer, or drag and drop your image directly into the uploader.

Upload Process

Click the (+) icon in the default favicon slot
Select your PNG file from your computer
Wait for the upload to complete
Your new site icon appears in the preview

File Requirements

Squarespace resizes uploaded favicons to display at 16×16 pixels in most browser tabs.

Upload at 100×100 to 300×300 pixels for clarity; the platform handles the scaling automatically.

Keep your design simple since complex logos become unreadable at small sizes.

Replacing an Existing Favicon

If you previously uploaded a browser icon, you will see “Replace” and “Edit” options instead of the plus sign.

Click Replace to swap the current icon with a new image file.

Step Three: How Do You Add a Dark Mode Favicon Version?

Squarespace lets you upload a second browser icon specifically for dark mode viewing.

This optional feature ensures your favicon remains visible when visitors use dark mode settings on their browser or device.

When You Need a Dark Mode Version

Black or dark-colored favicons disappear against dark browser tabs.

Upload a lighter version if your primary icon uses dark colors.

Adding the Dark Mode Icon

Below the default favicon slot, click the second upload area labeled for dark mode.

Upload a contrasting version of your site icon; white or light-colored designs work best here.

Skipping This Step

Bright or colorful favicons display fine in both light and dark modes.

Skip this if your icon already has good color contrast.

Step Four: How Do You Save and Apply Your New Favicon?

Click the Save button in the top right corner of the favicon settings panel.

Your custom favicon replaces the default Squarespace cube icon immediately on the server side.

Save Location

The Save button appears at the top right of the settings panel in both Squarespace 7.0 and 7.1.

Processing Time

Server-side changes happen instantly after clicking Save.

Browser display may take longer due to caching.

Verification

Confirm your new favicon displays correctly across different browsers and contexts.

Browser Tab Check

Open your Squarespace website in a new browser tab.

Look for your custom icon next to the page title; if you see the old icon or the Squarespace cube, clear your browser cache first.

Cross-Browser Testing

Test your favicon in Chrome, Safari, Firefox, and Microsoft Edge for cross-browser compatibility.

Safari sometimes adds a background color to favicons for contrast.

Search Results Preview

Google Search results may display your favicon next to your site listing.

This can take days or weeks to update in search results.

Troubleshooting

Issue: Favicon Not Displaying After Upload

Verify the file uploaded successfully in favicon settings
Check file format is PNG (not JPEG or GIF)
Confirm image dimensions are at least 100×100 pixels
Re-upload the file if the preview appears blank

Issue: Old Favicon Still Showing

Browsers cache favicons aggressively.

Clear your browser cache, restart the browser, then refresh your website.

Changes can take up to 48 hours to appear on all devices.

Issue: Favicon Appears Blurry or Distorted

Upload a larger source image (300×300 pixels)
Use exact square dimensions (1:1 ratio)
Simplify the design; detailed graphics blur at 16×16 display size

Issue: Dark Mode Version Not Appearing

You must upload a default favicon before adding a dark mode version.

Check that your browser or device has dark mode enabled for testing.

Related Processes

FAQ on How To Change Favicon On Squarespace

What Is a Favicon in Squarespace?

A favicon is the small square icon that appears in browser tabs, bookmarks, and search results next to your website title. Squarespace displays a default cube icon until you upload a custom browser icon representing your brand.

What Size Should a Squarespace Favicon Be?

Upload your favicon between 100×100 and 300×300 pixels with a 1:1 square ratio. Browsers display favicons at 16×16 pixels, but larger source files produce sharper results after Squarespace scales them down.

What File Format Works Best for Squarespace Favicons?

PNG format works best for Squarespace favicons. The platform also accepts ICO files. Use PNG with a transparent background for clean display across Chrome, Safari, Firefox, and Microsoft Edge browser tabs.

Why Is My Squarespace Favicon Not Showing?

Browser cache is the most common cause. Clear your browser cache, restart the browser, and refresh your site. Changes can take up to 48 hours to appear across all devices and browsers.

Can I Have Different Favicons for Light and Dark Mode?

Yes. Squarespace lets you upload a second favicon for dark mode display. This prevents dark-colored icons from disappearing against dark browser tabs. Upload your default favicon first, then add the dark mode version.

Where Do I Find Favicon Settings in Squarespace 7.1?

Go to Settings, then Website, then Favicon. You can also press the slash key ( / ) anywhere in the site editor, type “Favicon,” and jump directly to the favicon settings panel.

Where Do I Find Favicon Settings in Squarespace 7.0?

Navigate to Design, then Logo & Title, then scroll to Browser Icon. The upload area appears below your site logo settings. Click the plus icon to add your custom favicon image.

How Long Does It Take for a New Favicon to Appear?

Server-side changes happen instantly after saving. Browser display depends on cache settings. Most users see updates within minutes after clearing cache. Google Search results may take days or weeks to reflect changes.

What Happens If I Do Not Upload a Custom Favicon?

Squarespace displays its default dark cube icon on your site. This generic browser icon appears in tabs, bookmarks, and search results. Uploading a custom favicon improves brand recognition and site professionalism.

Can I Use My Logo as a Squarespace Favicon?

Yes, if your logo remains readable at small sizes. Simple logos work best. Complex designs with fine details become unreadable at 16×16 pixel display. Consider using a simplified version or brand initials instead.

Conclusion

Now you know how to change favicon on Squarespace in just a few minutes.

The process is straightforward: access the settings panel, upload your PNG file, optionally add a dark mode version, and save changes.

Your custom site icon now appears in browser tabs and bookmarks instead of that generic cube.

If your favicon does not display immediately, clear your browser cache and refresh the page. This fixes most visibility issues.

A well-designed favicon strengthens your visual identity and makes your website instantly recognizable among dozens of open tabs.

Small detail. Big impact on website recognition.

Take five minutes today to replace the default favicon and give your Squarespace site a more polished, professional appearance.