Want a different logo on your home page, product pages, and blog posts?
You’re in the right place. This friendly, step-by-step guide shows you exactly how to change logo on each page Squarespace with copy-paste code, mobile tips, troubleshooting, and SEO best practices.
I’ve kept every step plain and simple. No long paragraphs. No confusing jargon. Let’s get you a polished, professional site that looks perfect on every page.
Why you might want a different logo per page
Different pages can need different visual treatments.
For example:
- A product page might use a white logo on a dark hero image.
- A blog post could show a simpler logo to keep attention on the content.
- Seasonal or campaign pages (Sale, Ramadan, Christmas) may need a themed logo.
Different logos help brand clarity and improve contrast. They also make pages feel more tailored which can increase trust and conversions.
What Squarespace supports natively (7.1 vs 7.0)
Squarespace doesn’t offer a built-in “per-page logo” switch in most templates.
That means:
- For most sites, you’ll use custom CSS or a small JS fallback to swap logos per page.
- Some older templates (7.0) and some specific header layouts behave differently.
- In all cases you can change the global logo from Design → Logo & Title (or Site Styles), but per-page control usually needs code.
If you’re unsure which version you have, check your site settings or the dashboard. The steps below work for the majority of Squarespace 7.1 sites and many 7.0 templates.
Quick checklist — prepare before you start
- Backup your site’s custom CSS — copy into a text file.
- Prepare logo files: PNG or WebP for raster; SVG if your template accepts it.
- Optimize file size: aim for <100 KB where possible.
- Upload your logos to Settings → Files or Design → Custom CSS → Custom Files. Copy each file URL.
- Keep alt text ready good for accessibility and SEO.
Two easy methods | step-by-step
I’ll give two approaches: Method A (CSS) — recommended, and Method B (No-code / low-code) for non-developers.
Method A — CSS (recommended, stable, fast)
This method switches logos by targeting the page’s unique class (page ID).
1 — Upload your logos and copy URLs
- Go to Settings → Files (or Design → Custom CSS → Custom Files).
- Upload your alternative logos.
- Click each file and copy its direct URL.
2 — Find the page ID (easy)
- Open the page in your browser.
- Right-click → Inspect (or press F12).
- In the Elements panel, look for the
<body>tag. - You should see a class like
page-id-1234567890orcollection-123456.... - Note that page class (we’ll use
.page-id-1234567890in code).
3 — Add CSS
Go to Design → Custom CSS and paste this (replace placeholders):
/* Default logo rule — leave your existing global logo as-is */
/* Page-specific logo (desktop) */
.page-id-1234567890 .site-logo img {
content: url('https://your-site.com/path/to/logo-productpage.png');
width: auto;
height: 48px; /* adjust as needed */
}
/* If the header uses a background image for logo, use: */
.page-id-1234567890 .header-title {
background-image: url('https://your-site.com/path/to/logo-productpage.png');
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
}
.page-id-1234567890 .header-title img { opacity: 0; }
Replace
.page-id-1234567890and thehttps://...URL with your actual page class and file URL.
4 — Save and test
- Save CSS.
- Open the page in a private/incognito window to avoid cache issues.
- Check mobile and desktop views.
Mobile note: Many simple CSS swaps affect desktop only. Add a media query for mobile (below).
Method B — No-code / low-code (for non-developers)
If you prefer not to touch site-wide CSS, do this:
Option 1 — Insert an Image Block at top
- Edit the page.
- Add an Image Block in the very first section and upload the logo you want.
- Use a small CSS rule to hide the global logo for that specific page so the inline image appears as the header logo.
Simple hide rule (add to Custom CSS, change page class):
.page-id-1234567890 .site-logo { display: none !important; }
This approach is quick but the image block is not technically in the header, so it may not behave exactly the same across templates. It’s accessible but less elegant.
Option 2 — Use a Cover Page or unique layout
Create a page layout that includes the custom logo in the hero area. Works great for landing pages.
Where to put the code (exact placement)
- Design → Custom CSS — best for site-wide CSS and multiple pages.
- Page Settings → Advanced → Page Header — paste
<style>for page-only CSS. - Settings → Advanced → Code Injection — use this if you need JavaScript in site
<head>or footer (only for JS fallback).
Best practice: prefer CSS over JS when possible (faster and safer).
Copy-paste code snippets (with mobile support)
CSS — desktop + mobile swap
/* Desktop logo for page */
.page-id-1234567890 .site-logo img {
content: url('https://your-site.com/logo-desktop.png');
height: 48px;
}
/* Mobile logo for the same page (under 640px) */
@media only screen and (max-width: 640px) {
.page-id-1234567890 .site-logo img {
content: url('https://your-site.com/logo-mobile.png');
height: 36px;
}
}
JS fallback (when CSS content:url() doesn’t play nicely):
<script>
document.addEventListener('DOMContentLoaded', function() {
if (document.body.classList.contains('page-id-1234567890')) {
var logo = document.querySelector('.site-logo img');
if (logo) {
logo.src = 'https://your-site.com/logo-desktop.png';
}
}
});
</script>
Add JS in Settings → Advanced → Code Injection (Footer).
How to change the logo on the browser tab (favicon)
The browser tab icon is the favicon, separate from the header logo.
Steps:
- Go to Settings → Browser Icon (or Favicon).
- Upload a square PNG (32×32 or 48×48).
- Save and clear caches.
This answers: How to change logo on tab in Squarespace? — Upload the favicon in Site Settings.
Mobile & responsiveness — what to test
- Use Squarespace preview and the browser’s device toolbar.
- Check actual phones when possible.
- If mobile header is different (many templates stack elements), add the media query shown above.
- If the mobile logo still shows the default, ensure you placed the mobile-specific URL in
@mediarule.
SEO & performance — optimize your logo images
- Use descriptive file names:
brandname-productpage-logo.png. - Add alt text (e.g., “BrandName — Product Page Logo”) to inline images.
- Compress images using tools like TinyPNG or convert to WebP where supported.
- If changes don’t appear for visitors, use cache-busting: add
?v=2to the image URL after upload.
Good image practices help page speed and indexing.
Troubleshooting — common problems & fixes
Logo not changing?
- Confirm you used the correct page class (page ID).
- Make sure the CSS selector matches your template (
.site-logo imgis common but some templates use.header-title img). - Try
!importantas a last resort:.page-id-1234567890 .site-logo img { content: url('https://...') !important; } - Clear browser cache or test in Incognito.
Desktop changed but mobile didn’t
- Add the mobile
@mediablock with the mobile logo URL.
Image not loading
- Re-upload and copy the new file URL. A wrong or expired URL will break the image.
Reverting changes safely
If you need to go back:
- Remove the page-specific CSS or the page header
<style>block. - Restore your saved copy of original CSS if you made changes to global styles.
- Re-upload the original global logo via Design → Logo & Title.
Always keep a backup of your custom CSS.
Mini case study — Home vs Product page (example)
- Home page uses the default logo:
ambreen-home-logo.png. - Product page uses a white-on-dark logo:
ambreen-product-logo.png.
CSS (example):
.page-id-1111111111 .site-logo img { content: url('https://ambreenbasit.online/ambreen-product-logo.png'); }
Result: Home keeps the original brand logo. Product pages show the white logo that reads better on dark backgrounds. Quick, practical, and polished.
FAQ (People Also Ask)
How do I add a logo on each page?
Upload logos to Settings → Files, find the page ID, then add page-specific CSS that swaps the header image or hides the global logo and shows an inline image.
How to make header different on each page in Squarespace?
Use page-targeted CSS or a per-page inline image. Some templates require JS fallback.
How do I change the logo in Squarespace?
Global change: Design → Logo & Title (or Site Styles). For per-page changes use the methods above.
How to change logo on tab in Squarespace?
Upload a favicon in Settings → Browser Icon.
How do I change the logo on Square Sites?
Square Sites is a different product. Look for site-wide logo settings there or add a header image per page if per-page options aren’t present.
Conclusion
Changing your logo on each page in Squarespace isn’t just about style it’s about smart branding and creating a tailored experience for your visitors. Whether you’re running multiple services, promoting seasonal campaigns, or testing different designs, this method helps you maintain a clean and professional look across your entire site.
By following the step-by-step guide above, you’ve learned how to upload alternate logos, locate page IDs, and safely apply custom CSS or JavaScript without breaking your design. If you’re managing your website through Squarespace, this simple tweak can make a huge difference in how your audience perceives your brand.
💡 Pro Tip: Always preview your changes on mobile and desktop before saving. Responsive design helps your brand look perfect on every screen — something Google values highly for ranking and user experience.
If you’re exploring more smart website tweaks, don’t miss our detailed tutorial on creating quick desktop access for any site. And if you love experimenting with new ideas, check out our guide on building unblocked sites in creative ways it’s another smart method to expand your online reach and flexibility.
For additional clarity on design or code adjustments, you can also visit the official Squarespace Help Center, which keeps its documentation up to date with platform changes.
By combining these trusted resources with your own creativity, you’ll build a website that looks professional, loads fast, and leaves a strong first impression on every visitor
One Response