How to add a different logo on other pages on Squarespace 7.1.

By default, Squarespace only allows one logo per website. But what if you want to display a different logo on certain pages—for example, a light version on dark backgrounds, or a seasonal logo for a campaign?

With a little custom CSS and page targeting, you can show a unique logo on selected pages in Squarespace 7.1 without using custom code blocks or breaking your design.

Table of Contents

• Why Use Different Logos on Different Pages

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Use Different Logos on Different Pages?

• Match dark/light backgrounds without editing your entire site header

• Highlight seasonal branding (Black Friday, Christmas, etc.)

• Create a different feel for a landing page or collection

Complexity: Easy

---

Step by Step Instructions

Step 1

Upload the alternative logo by clicking on the add link option.

---

Step 2

Then click on the gear image.

---

Step 3

In order for you to be able to upload the files, click on the ‘UPLOAD FILE’ link..

---

Step 4

Copy the code below and then click on the gear Icon.

<style> 
div.header-title-logo a {
content:url("[LOGO_URL]") !important;     
max-width: 290px;
}
</style>

Click on the ‘Advanced’ label and paste the code.

Note the [LogoURL] should be changed to “/s/logoName“ in the example it is “/s/MEDAX-LOGORED.png“.

NOTE: It is important that you have /s/ before the image file name.

---

Step 5

Repeat steps 1 and 5 to add other alternative logos on other pages.

---

Key Takeaways

• Squarespace only supports one site logo by default, but CSS allows for more flexibility.

• Use the page advance section on the specific pages where you want the alternate logo.

• Upload your image as a Managed File and use the full URL in CSS.

FAQs

Can I use this for more than one page?
Yes! Just duplicate the code and place it the other page advance section and as well as uploading the logo.

Will this work with mobile navigation?
Yes, but if your mobile logo uses a different element (like a smaller size), you may need to add media queries to fine-tune it.

---

---

Conclusion

Customizing your Squarespace 7.1 site with different logos per page is a powerful way to elevate your design and create a more dynamic experience. Whether you're running a promo, launching a new service, or just want a light/dark logo toggle—this CSS trick helps you achieve that with full control.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.