How to set different logos on individual Squarespace pages
Squarespace does not have a built-in feature to change your logo on a per-page basis through the standard settings. The logo you upload in your site-wide header appears the same across every page. If you want a different logo on specific pages, you have three working routes: use custom code to swap the logo conditionally, create a separate header section on individual pages that overrides the site header, or use CSS to hide the main logo and display a page-specific image instead.
The easiest route for most people is the CSS approach, which requires no coding knowledge beyond copying a few lines into your page settings. The custom code route gives you more control but requires basic familiarity with HTML and CSS. The header override method works well if you only need a different logo on one or two pages.
Key Takeaways
- Squarespace's default logo setting applies to all pages, so you must use custom code or CSS to change it per page.
- The CSS method hides your site logo on specific pages and displays a custom image instead, and works on any Squarespace plan that allows custom CSS.
- Custom code injected into individual page headers lets you swap logos dynamically, but requires you to write or find the correct code snippet.
- You can also create a full custom header section on individual pages that sits above your site header, though this takes more space and manual setup.
Using CSS to hide and replace your logo on specific pages
This method hides your site logo on the pages where you want a different one, then displays a custom image in its place. You do this by adding CSS code to the page settings, not to your site-wide header.
First, upload the image you want to use as your alternate logo to your Squarespace assets or host it on an external image service. Then go to the page where you want the different logo. Click the gear icon (page settings), scroll to the "Advanced" section, and find the "Page Header Code Injection" or "Custom CSS" field. Paste this code:
.header-logo { display: none; } .header::before { content: url('YOUR-IMAGE-URL-HERE'); display: block; }
Replace YOUR-IMAGE-URL-HERE with the actual URL of your alternate logo image. Save the page. The site logo will disappear on that page only, and your custom image will appear in its place. This method works on Business plans and above, which allow custom CSS injection.
Injecting custom code into the page header
If you want more control over where and how the logo appears, you can inject JavaScript into individual page headers that swaps the logo element itself. This approach works on any plan that allows code injection.
Go to the page settings, find "Page Header Code Injection," and paste code like this:
<script> document.addEventListener('DOMContentLoaded', function() { var logo = document.querySelector('.header-logo img'); if (logo) { logo.src = 'YOUR-NEW-LOGO-URL'; } }); </script>
This code finds your site logo image and replaces its URL with a new one. Again, replace YOUR-NEW-LOGO-URL with the actual URL of your alternate logo. The change happens only on that page. If you want the logo to link to a different URL or have different styling, you can expand this code, but the basic version handles the swap.
Creating a custom header section that overrides the site header
Another approach is to add a custom section at the very top of specific pages that looks like a header and contains your alternate logo. This sits above your site's default header, so visitors see your custom logo first.
Go to the page and add a new section at the top. Use a straightforward layout — often a single column or two-column block works best. Add your alternate logo image to that section, style it to match your site's header height and spacing, and adjust the background color if needed. Then use CSS to hide the site header on that page only:
.header { display: none; }
This method gives you full design control but requires manual setup on each page where you want it. It also means maintaining two headers if you change your site design later.
Checking which Squarespace plan allows code injection
Code injection is available on Business plans and above. If you are on a lower plan (Personal or Professional), you can still use the custom header section method, but you cannot inject CSS or JavaScript into page headers.
To check your plan, go to Settings, then Billing. Your current plan name appears at the top. If you are on Personal or Professional and want to use code injection, you would need to upgrade. If you prefer not to upgrade, the custom header section method works on any plan and requires only dragging and dropping elements.
Testing your logo change across devices
After you add your code or custom section, view the page on desktop, tablet, and mobile to make sure the logo displays correctly at each size. Squarespace's responsive design sometimes shifts elements on smaller screens, so a logo that looks right on desktop might overlap text or become too large on mobile.
Use your browser's developer tools (right-click, then "Inspect") to test different screen sizes without needing actual devices. Check that the logo is clickable if it should link somewhere, and that it does not push other header content out of alignment. If the logo looks wrong on mobile, you may need to add additional CSS rules that adjust its size or position for smaller screens.
When to use each method
| Method | Best for | Plan requirement | Effort level |
|---|---|---|---|
| CSS hide and replace | Quick swaps on a few pages; minimal design changes | Business or above | Low — copy and paste code |
| Custom code injection | Dynamic logo swaps; keeping the same header structure | Business or above | Medium — requires basic code knowledge |
| Custom header section | Full design control; works on any plan | Any plan | High — manual setup per page |
Frequently Asked Questions
Can I change the logo on just the homepage?
Yes. Use any of the three methods above on the homepage only. The site logo will remain unchanged on all other pages. If you use CSS or code injection, add it only to the homepage's page settings, not to your site-wide header settings.
What if my alternate logo is a different size than my site logo?
You can control the size with CSS. Add width and height rules to your code, for example: width: 200px; height: auto; This keeps the image proportional while setting a specific width. Test on mobile to make sure it does not become too small or too large.
Will changing the logo on one page affect the logo on other pages?
No, as long as you add the code only to that page's settings, not to your site-wide header. Code injected into individual page settings applies only to that page. If you want the change on multiple pages, you must add the code to each page separately.
Can I make the alternate logo link to a different URL?
Yes, but it requires modifying the code. With the CSS method, you would wrap the image in an anchor tag. With the JavaScript method, you can change both the image URL and the link destination. If you are not comfortable writing code, the custom header section method lets you add a link by straightforward clicking the logo image and setting its link in the editor.
What image format works best for an alternate logo?
PNG with a transparent background works best because it blends with any header color. JPG works if your logo has a solid background. SVG files are ideal for logos because they scale perfectly at any size without losing quality. Make sure your image is already sized close to how you want it to appear — do not rely on CSS to shrink a very large file, as it will still load slowly.