Squarespace Favicon Guide: Including Dark Mode Support

Squarespace's Hidden Favicon Superpower

Here's something most Squarespace users don't know: the platform lets you upload a second favicon that only shows when a visitor is browsing in dark mode. Most website builders give you one favicon and that's the end of it. Squarespace gives you a pair, and it takes about a minute to set up.

It's a genuinely useful touch. Operating systems and browsers increasingly respect a user's theme preference, so a black logo on a black tab bar is a real problem - and this is the fix, built into the platform rather than bolted on.

Quick Requirements Check

Before diving in, here's what you'll need:

• Squarespace Plan: Any paid plan (currently Basic, Core, Plus or Advanced - the legacy Personal/Business/Commerce plans have it too)
• Two Square Images: One for light mode, one for dark mode
• Size: Between 100x100 and 300x300 pixels (Squarespace displays it at 16x16)
• Format: PNG - Squarespace recommends it, and it's the only format their help centre names. You can't upload an .ico file, so don't bother generating one for this platform
• File Size: 100 KB maximum. This is a hard cap, not a suggestion - the upload fails above it
• Design Consideration: Test both versions against light and dark backgrounds

"

Design tip: Your dark mode favicon doesn't need to be drastically different. Often, simply inverting colours or adding a subtle outline is enough to ensure visibility across all themes.

Adding Your Favicon: The Standard Way

Step 1: Access Favicon Settings

From your Squarespace dashboard, navigate to Settings -> Website -> Favicon. If you've followed an older tutorial that sent you to Design -> Browser Icon, that was the 7.0-era path and it's since moved.

Step 2: Upload Your Primary Favicon

Click Add Image and upload your standard (light mode) favicon. This will be the default icon that appears for users without dark mode enabled.

Step 3: Position and Save

Use Squarespace's focal point selector to ensure your logo is centred properly. Click Save to apply the changes. Your favicon typically appears within 5-10 minutes on your live site.

The Dark Mode Advantage

Now for the interesting part - adding dark mode support:

Step 1: Enable Dark Mode Favicon

In the same Favicon panel, look for the option to add an alternate version for dark mode. It only appears once you've set your primary favicon - Squarespace won't let you add a dark mode icon without a default one first, which catches a few people out.

Step 2: Upload Dark Mode Version

Upload your dark mode favicon. This should be designed to look good against dark backgrounds - think white or light-coloured logos with sufficient contrast.

Step 3: Preview Both Versions

Squarespace shows a preview of how each favicon appears in different contexts. Pay attention to these previews - they accurately represent real-world usage.

Design Strategies for Dual Favicons

The Inversion Approach

The simplest method: take your regular logo and invert the colours. Black becomes white, dark blue becomes light blue. This maintains brand consistency while ensuring visibility.

The Outline Method

Add a white outline or glow to your regular favicon for dark mode. This creates separation from dark backgrounds without completely changing your logo.

The Background Method

Place your logo on a subtle light background (like a soft grey circle) for the dark mode version. This ensures your logo always has contrast, regardless of the browser's exact shade of dark.

The Adaptive Colour Method

Use your brand's secondary colours that work better in dark contexts. For example, if your primary brand colour is navy blue, consider using a lighter blue or accent colour for dark mode.

Testing Your Dual Favicons

Proper testing ensures your favicons work everywhere:

Troubleshooting Common Issues

Favicon Not Updating?

1. 1Browser Testing: Toggle dark mode in your OS settings and check multiple browsers
2. 2Device Testing: View on phones and tablets in both light and dark modes
3. 3Bookmark Testing: Add bookmarks in both modes to see favicon behaviour
4. 4PWA Testing: If using Squarespace as a progressive web app, test home screen icons

Squarespace favicons can be stubbornly cached:

Dark Mode Favicon Not Showing?

• Clear browser cache completely (not just refresh)
• Try incognito/private browsing mode
• Check on a different device or network
• Wait up to 24 hours for full propagation

Worth knowing before you go hunting for a bug: browser support for theme-aware favicons is genuinely uneven, and a missing dark icon is often the browser, not your setup.

• Chrome, Edge and other Chromium browsers: the alternate icon works
• Firefox: inconsistent, so don't rely on it
• Safari: doesn't switch favicons by theme, so Safari users see your default one

That last point is the reason a default favicon that reads well on both light and dark tabs is still the more important half of the job. Treat the dark version as the upgrade, not the safety net.

File Size Issues?

Your favicon has to come in under 100 KB or the upload is rejected outright. If yours is over:

Advanced Considerations

Seasonal Favicon Swapping

• Use PNG-8 format for simple logos
• Compress with a tool like TinyPNG
• Remove unnecessary metadata from images
• Simplify complex logos rather than shrinking them further

Squarespace makes it easy to update favicons for holidays or campaigns. Consider creating matched sets:

The SVG Question

• Regular + Dark mode for standard use
• Holiday themed + Dark holiday themed for seasonal updates
• Sale/Promo versions that work in both modes

Squarespace's help centre only names PNG, so SVG isn't a route here. That's a shame, because an SVG favicon can carry its own prefers-color-scheme media query and adapt on its own - one file, both themes. Safari added SVG favicon support in Safari 26, so the format itself is finally well supported across browsers. If you ever move to a platform where you control the <head>, it's worth the switch. On Squarespace, the two-PNG approach is the one that works.

Accessibility Implications

Dark mode favicons aren't just about aesthetics - they're about accessibility. Users with visual sensitivities often rely on dark mode, and a poorly visible favicon can break their browsing experience.

Creating Perfect Favicons

Need a clean, correctly sized PNG to upload? Try Unwrite's Favicon Generator. Upload your logo, set the background colour, padding and shape, and download the full set - all processed in your browser, so the logo never leaves your machine. The 300x300 PNG from that download is the one to hand Squarespace.

To be straight with you: the generator makes one icon set from one source image. It doesn't invent a dark mode variant for you. Run your inverted or light-coloured logo through it a second time and you'll have the pair Squarespace wants.

The Competitive Edge

Details matter, and this is a cheap one to get right. By setting both light and dark mode favicons, you're covering a case most competitors never think about. It's a subtle signal that your brand understands and respects user preferences.

This feature alone might not drive sales, but it contributes to an overall impression of professionalism and thoughtfulness. When users notice your favicon adapts to their theme preference, it creates a small moment of delight - and those moments add up.

Looking Forward

Squarespace's early adoption of dark mode favicons positions them well for the future. As more browsers and operating systems embrace adaptive design, having this infrastructure already in place gives Squarespace sites an advantage.

Take ten minutes today to implement dual favicons. Your dark mode users will appreciate the attention to detail, and your brand will stand out in a sea of sites that haven't yet adapted to this new reality.