You can set a different logo for each page in Squarespace, but the method depends on whether you want the change to be automatic or manual

Squarespace does not have a built-in feature to assign a unique logo to each page through the settings. However, you have two working paths: use Squarespace's native logo settings to create one logo that appears everywhere, then manually replace it on individual pages using image blocks — or use custom code if your site plan includes it. Most people use the manual image block method because it is straightforward and does not require coding knowledge.

The manual approach means you keep your site logo in the header as normal, then add a custom image block at the top of pages where you want a different logo to appear. This custom image will sit above your regular content and can be styled to look like a page-specific header. The logo in your site header stays the same across all pages.

Key Takeaways

  • Squarespace's header logo setting applies to every page automatically, so you cannot change it per page through settings alone.
  • The simplest method is to add an image block at the top of individual pages and upload a different logo there, positioning it above your main content.
  • You can hide the header logo on specific pages using custom CSS if your plan includes code injection, then replace it with an image block.
  • Image blocks can be styled with links, so your custom page logos can link back to your home page just like a regular logo would.
  • This approach works on all Squarespace plans, including the free trial, as long as you can add content blocks to pages.

Add a custom logo using an image block on individual pages

This is the fastest method and requires no coding. Open the page where you want a different logo to appear. Click the plus icon at the top of your page content area to add a new block. Search for or select Image from the block menu. Upload the logo image you want to use on that page.

Once the image is placed, you can resize it by dragging the corners and position it at the very top of the page. To make it function like a logo, click on the image block, then click the link icon in the toolbar and set the link destination to your home page. Now the custom logo will act as a clickable link back to your site home, just like a standard logo.

Repeat this process on any other pages where you want a different logo. Your site header logo remains unchanged and visible on all pages — this custom image block simply sits above your page content on the pages you choose.

Hide the header logo on specific pages using custom CSS

If you want to remove the default header logo from certain pages and replace it entirely with your custom image block, you can use custom CSS. This method requires a plan that includes code injection — typically Business or higher, though some older plans may include it.

Go to Settings > Advanced > Code Injection. In the Header field, paste this code:

<style> .collection-5f1a2b3c4d5e6f7g8h9i .header-logo { display: none; } </style>

Replace the collection ID (the long string of characters) with the actual ID of the page where you want to hide the logo. To find your page ID, go to the page in the editor, look at the URL bar, and copy the ID that appears after /pages/. Once you add this code, the header logo disappears on that page only, and your custom image block becomes the only logo visible.

Style your custom image block to match your site design

After you add an image block with your custom logo, you can adjust how it looks. Click the image block and open the Design panel on the right. You can add a border, shadow, or background color to match your site's aesthetic. Adjust the width and height to scale the logo appropriately — most logos look best between 150 and 300 pixels wide.

If you want the custom logo to have padding or spacing around it, click the block itself (not the image inside it) and use the spacing controls in the design panel. You can also center the image by selecting the alignment option. These styling choices help your custom logo feel intentional rather than like an afterthought.

Make your custom logo link to a specific page or external site

Image blocks can link anywhere, not just to your home page. Click your custom logo image, then click the link icon in the toolbar. You can link to another page on your site, an external website, or even a file download. This is useful if you want different sections of your site to have branded logos that link to their respective section pages.

For example, if you have a blog section with its own logo, you could make that logo link to your main blog page. Or if you have a partner logo on a partnership page, you could link it to the partner's website. The image block respects all standard Squarespace link options.

Use different logos for mobile and desktop views

Squarespace image blocks respond to screen size, so you can upload a logo that looks good on both mobile and desktop. However, if you want to show completely different images on mobile versus desktop, you need to add two separate image blocks and hide one on each device type.

Add your first image block with the desktop version of your logo. Click it and open the Design panel. Scroll down to Visibility and select Hide on mobile. Then add a second image block below it with your mobile logo version. Click that block, open Design, go to Visibility, and select Hide on desktop. Now each device sees the logo optimized for its screen size.

Troubleshoot common issues with custom logos

If your custom logo image appears blurry or stretched, the image file itself may be too small or the wrong aspect ratio. Use an image that is at least 500 pixels wide and matches the proportions you want (square, rectangular, or wide). Squarespace will scale it down, but it needs room to scale from.

If your custom logo does not align the way you want, check whether you are adjusting the image alignment or the block alignment. Click directly on the image to adjust the image itself; click the border of the block to adjust the entire block's position on the page. If the logo appears too close to your page title or content, add a spacer block below it to create breathing room.

If you used CSS to hide the header logo and it is still showing, double-check that you copied the correct page ID from the URL. Page IDs are case-sensitive and must match exactly. If you are unsure, test the code on a less important page first.

Frequently Asked Questions

Can I change the logo in the header for just one page?

Squarespace's header logo setting applies to all pages. To change it on one page, you must either hide the header logo with CSS and add a custom image block, or simply add a custom image block above your content while keeping the header logo visible. The image block method is simpler and works on all plans.

Will a custom image block logo work as a clickable link?

Yes. Click the image block, then click the link icon in the toolbar and set your destination. You can link to your home page, another page on your site, or an external URL. The logo will function exactly like a standard header logo.

What image format should I use for my custom logo?

PNG files with a transparent background work best for logos because they blend seamlessly with any background color. JPG also works but may show a white or colored background. SVG files are ideal if you want the logo to scale perfectly at any size without losing quality.

Can I use different logos on my home page and other pages?

Yes. Add an image block to your home page with one logo, and add image blocks to other pages with different logos. Your header logo remains the same everywhere, but the custom image blocks give you page-specific branding above your content.

Does adding a custom logo block slow down my site?

No. A single image block has negligible impact on page load time. If you add many large, unoptimized images across many pages, that could affect speed, but one logo image per page is standard and will not cause problems.