If you're designing your website in Squarespace and want to invert your logo (e.g. make it white instead of black), but only on one specific page, you’re in the right place.

This is especially useful when your default logo color blends into the background of a particular page. Instead of changing the logo across your entire site, you can apply a quick code tweak to invert it on just the page where it’s needed.

Follow this simple step-by-step guide to invert your logo on a single Squarespace page.

Why Invert Your Logo?

Your logo should always stand out clearly against your page background. On pages with dark backgrounds (like deep blue or black), a black logo may get lost, making your site look unprofessional. Inverting the logo color to white helps maintain visual contrast and improves the user experience.

*Want a framework for designing the perfect homepage?*

Access now

Need an expert to build your Squarespace website?

Book a free kick-off call with our team to discuss your project requirements in detail.

Schedule a call

How to Invert Your Logo on One Page in Squarespace

Here's how to invert your logo only on a specific page using Squarespace's page header code injection.

Step 1: Navigate to the Page You Want to Edit

In your Squarespace dashboard, go to Pages.
Click the Settings (cog icon) next to the page where you want to invert the logo.

Step 2: Use the Page Header Code Injection

In the page settings, click on Advanced.
Locate the Header Code Injection box.
Paste the following code:

<style>

#header img {

filter: invert(1);

}

</style>

Your logo will now appear white (inverted) only on that specific page.

Final Thoughts

Using this quick Squarespace trick, you can maintain brand consistency while tailoring the look and feel of your site on a per-page basis. It’s fast, effective, and doesn’t require any complicated custom development.