Squarespace Favicon Guide: Including Dark Mode Support

Squarespace's Hidden Favicon Superpower

Here's something most Squarespace users don't know: the platform offers a unique dark mode favicon feature that's ahead of its time. While other website builders force you to use one favicon for all scenarios, Squarespace lets you upload separate favicons for light and dark browser themes. It's a small detail that makes a massive difference in 2025, when dark mode usage has exploded across all devices.

This feature positions Squarespace as surprisingly forward-thinking. With operating systems and browsers increasingly respecting user theme preferences, having an adaptive favicon isn't just nice to have - it's becoming essential for professional brands that care about every detail of their visual identity.

Quick Requirements Check

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

Squarespace Plan: Any paid plan (Personal, Business, Commerce)
Two Square Images: One for light mode, one for dark mode
Size: Minimum 100x100 pixels, recommended 300x300 or larger
Format: PNG, JPG, or ICO (PNG recommended for transparency)
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 Design Settings

From your Squarespace dashboard, navigate to Design -> Browser Icon (Favicon). This direct path saves you from hunting through nested menus.

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 Browser Icon settings, look for "Add a dark mode browser icon" - this option appears after you've set your primary favicon. Toggle it on to reveal the upload field.

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:

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

Troubleshooting Common Issues

Favicon Not Updating?

Squarespace favicons can be stubbornly cached:

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

Dark Mode Favicon Not Showing?

Ensure your browser and OS actually support dark mode favicons:

Safari 12.1+ on macOS 10.14.4+
Chrome 81+ with appropriate flags
Firefox with SVG favicon support
Edge based on Chromium engine

File Size Issues?

Keep favicons under 100KB for best performance:

Use PNG-8 format for simple logos
Compress with tools like TinyPNG
Remove unnecessary metadata from images
Consider simplified versions of complex logos

Advanced Considerations

Seasonal Favicon Swapping

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

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

The SVG Future

While Squarespace doesn't yet support SVG favicons, it's worth preparing for the future. SVG favicons can include built-in dark mode support with CSS media queries - a single file that adapts automatically.

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 to create optimised favicons for both modes? Try Unwrite's Favicon Generator. Upload your logo and instantly generate both light and dark mode versions, all processed privately in your browser. Export the perfect pair ready for Squarespace's dual favicon feature.

The Competitive Edge

In 2025's crowded digital landscape, details matter more than ever. By implementing both light and dark mode favicons, you're showing attention to detail that most competitors miss. 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.