How to Change the Logo on Each Page in Squarespace
Squarespace is designed around sitewide consistency — your header, footer, and logo typically stay the same across every page. That's great for branding, but it creates a real challenge when you need a different logo on specific pages. Maybe you want a white logo on a dark hero section, a simplified mark on your landing pages, or a seasonal variation on a promotional page.
Here's what's actually possible — and what determines whether it works for your setup.
How Squarespace Handles Logos by Default
In Squarespace, your logo is set globally through the header settings. Navigate to Design → Header → Site Identity and you'll find options to upload your primary logo, a browser icon (favicon), and in some templates, a separate logo for when the header scrolls (a "scrolled" logo variant).
This global logic means any change you make to the logo updates it across the entire site. There is no native per-page logo switcher built into Squarespace's standard interface.
That said, there are several workarounds — and which one applies to you depends heavily on your Squarespace version, your template, and how comfortable you are with custom code.
Squarespace 7.0 vs. 7.1: Why the Version Matters
Your Squarespace version is the single biggest variable in this conversation.
Squarespace 7.0 used template-specific designs, some of which had more granular header control. Certain 7.0 templates allowed different header styles per page, giving indirect control over how a logo appeared depending on the page context.
Squarespace 7.1 unified the design system across all templates. The upside is a more consistent editing experience. The downside: per-page header customization is more restricted out of the box. However, 7.1 introduced more robust Page CSS injection, which opens the door to code-based solutions.
To check your version, go to Settings → Advanced → Developer Tools or look at your plan details in the account dashboard.
Approaches That Can Achieve Per-Page Logo Changes
1. 🖥️ Custom CSS Per Page (Page Header Code Injection)
On Business plans and above, Squarespace allows you to inject custom CSS into individual pages via Page Settings → Advanced → Page Header Code Injection.
The approach: hide the default logo on that page and replace it with a different image using CSS. This typically looks something like targeting the header logo element with a page-specific class and overriding the background-image or content property.
This requires:
- A Business plan or higher
- Basic familiarity with CSS selectors
- Knowledge of your template's specific class names (which you can find using browser developer tools)
The limitation is that CSS-based logo swaps can be fragile — Squarespace updates sometimes change class names, breaking your custom styling without warning.
2. JavaScript Injection
A more dynamic method uses JavaScript injected into the page header to swap the logo src attribute on load. This gives you more control than CSS alone and can handle edge cases like responsive logo sizing.
This approach requires a higher comfort level with JavaScript and the same Business plan requirement for code injection. It also carries the same maintenance risk if Squarespace's HTML structure changes.
3. Using a Promotional Pop-Up or Section-Level Branding
For some use cases — like a campaign landing page — the goal isn't really a different header logo but rather a different visual identity for that page. Squarespace's page sections can be styled independently, so a full-bleed hero with your alternate branding mark placed as an image block inside the section can functionally achieve the look of a unique logo, while the header logo remains consistent.
This is the lowest-risk approach because it uses no custom code and won't break on platform updates.
4. Separate Pages or Squarespace Cover Pages
If the page needing a different logo is relatively standalone — a landing page, an event page, a microsite-style page — Squarespace Cover Pages (available in 7.0) offered a completely separate layout environment where logo handling was distinct. In 7.1, you can approximate this with a full-bleed blank page that hides the header entirely using CSS and builds its own top-of-page branding within the page content itself.
Factors That Determine Which Approach Works for You
| Factor | Why It Matters |
|---|---|
| Squarespace version (7.0 vs 7.1) | Determines available template features and CSS structure |
| Plan level | Code injection requires Business plan or higher |
| Technical skill | CSS/JS methods require hands-on comfort with code |
| How many pages need a unique logo | One or two pages vs. many changes the effort calculation significantly |
| Template being used | Some templates expose more header flexibility than others |
| How often you update the site | Custom code needs maintenance when Squarespace updates |
What "Per-Page Logo" Usually Means in Practice
It's worth being precise about the goal. Most people asking this question are actually trying to solve one of a few specific problems:
- A dark background page needs a light logo — often solvable with CSS color/filter adjustments rather than a full logo swap
- A landing page should feel distinct from the main site — often better addressed through section design than header changes
- A specific event or product page needs co-branding — usually best handled with an in-page image block rather than modifying the header
Each of these has a different optimal path. The technical method that makes sense for one scenario may be overkill — or insufficient — for another.
The right approach ultimately depends on what your specific pages need to look like, which Squarespace version and plan you're on, and how much ongoing maintenance you're willing to take on when the platform updates. 🔧