Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Adding a site logo

You can upload a logo image to appear in place of your site title. This is a great way to promote your brand on your site.

Note: If you upload a logo, the site title won't display on your site. However, we recommend keeping the text in the Site Title field. Search engines still index the title and display it in search results, so it's a best practice to keep it there for SEO. Additionally, the site title also displays in browser tabs even when it's hidden by a logo, helping visitors identify it. To also include the text of your site title in your logo, see Step 4.

Before you begin

  • Logo display varies by template. Many templates allow you to adjust the logo's size and appearance, but some templates have maximum heights or widths. To learn more about your site's logo settings, explore your template's Style Editor and visit our template guides.
  • To ensure your logo looks great on any device, we recommend experimenting with your template's style tweaks and uploading an image that fits these values.
  • When in doubt, it's better to start with a larger image and then decrease its size in the Style Editor, rather than using a smaller one and increasing its size. For more formatting tips, visit Formatting your images for display on the web.
  • Clicking your logo image always leads to your homepage. This clickthrough can’t direct to a different page of your site without applying custom code. Please note that adding code to your site is an advanced modification. While we can't offer more help on this topic, you can view this relevant post from our Answers forum for more information and example code.
  • To create a logo without a background color, ensure your logo is a .png file with a transparent background. You can use third-party software to create this, or Squarespace Logo creates transparent backgrounds automatically.

Add the logo image

Hover over the title on any page and click Edit. If your site is new, the placeholder text will say Your Site Title.

Note: If you don't see the Edit annotation, collapse the site preview by clicking the arrow in the top-left corner of your site first.

This opens the Logo & Title panel. Scroll down to Logo Image, and then drag your image into the image uploader. Click Save.

Note: You can also click the image uploader to open a file selection menu and select a file from your computer.

Create a logo (optional)

With your paid account, you can create free logos using Squarespace Logo. To get started, click Create a New Logo.

Use a logo with text (optional)

It isn't possible to display a logo and site title at the same time. If you'd like to do so, include your site title text in the logo image.

Note: Text in the image file you use for your logo isn't indexable by search engines. We recommend keeping your site title text in the Site Title field when using a logo.

Remove a logo

If you no longer need your logo image, you can remove it from the Logo & Design panel. In the Home Menu, click Design, and then click Logo & Title.

Scroll down and hover over your logo image. Click the trash can icon to delete the image. Click Save and your site title will reappear.

Logo display

Here's how the logo displays for each template. Templates are grouped by family.

Adirondack

Logo displays at top center on desktop.

The site title always displays in place of the logo on mobile (top center) and when the header collapses to a fixed navigation bar on scroll. 

Avenue

Logo displays at the top of the page.

Use the Layout Style tweak to set the logo to Left, Center, or Right.

Logo is always centered on mobile.

Aviator, Aubrey, Encore

Logo displays at top center on desktop and mobile.

Use the Info Page Layout tweak to center (Offset or Poster) or left-align (Business Card) the logo on the Info Page only.

Resize the logo for mobile with the Logo Size On Mobile tweak. 

Bedford, Anya, Bryant, Hayden Logo displays at top left on desktop and mobile. 
Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

Logo displays in the header on desktop. Choose its position or hide it with the Branding Position tweak.

On mobile, the logo can display in the top or bottom mobile bar. Use the Logo Width tweak to set the logo size on mobile. 

Farro, Haute

Logo displays in the header on desktop. Choose its position or hide it with the Branding Position tweak.

On mobile, the logo can display in the top or bottom mobile bar. Use the Logo Width tweak to set the logo size on mobile. 

Five

Logo displays with navigation (left, right, center) on desktop. Use the Banner Content tweak to determine if the logo displays in the header or over the banner image.

When the logo is set to display over the banner image, it appears on smartphone. Otherwise, it's replaced by the site title.

Flatiron

Logo displays at top right or top left on desktop, and top center on mobile.

Use the Site Title/Logo Position tweak to set it to Left or Right.

Forte Logo displays at top left on desktop and mobile view.
Galapagos

Logo displays at top center on desktop and mobile.

Upload a mobile-specific logo and set a mobile logo height with the Nav Branding and Nav Height tweaks.

The site title displays in place of the logo on mobile unless you've uploaded a mobile logo.

Ishimoto

Logo displays at top left, center, or right on desktop and top left on mobile.

Use the Header Alignment tweak to set the logo and tagline to Left, Center, or Right.

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift Logo displays at top left on desktop and mobile.
Momentum

Logo displays at bottom left on desktop and bottom center on mobile.

Use the Navigation Position tweak to move the logo to Bottom or Top. 

Montauk, Julia, Kent, Om

Logo displays at top left, center, or right on desktop, and top center on mobile.

Use the Canvas Style tweak to set the desktop logo to Normal (centered), Masthead Logo Left, or Masthead Logo Right.

Native Logo displays at top center on desktop and mobile.
Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi Logo displays at top center on desktop and mobile.
Skye, Foundry, Tudor Logo displays in the middle of the header in desktop and mobile view.
Supply

Logo displays at left in desktop and top left on mobile.

The site title displays in place of the logo on mobile by default. Uncheck the Use Site Title in Mobile Header tweak to display the logo.

Tremont, Carson, Henson

Logo displays in the top-left corner of the header on desktop and mobile. The header disappears when you scroll down.

Use the Logo Height tweaks to adjust the logo height for different browser sizes.

Wells

Logo displays at top of left sidebar on desktop and at top left on mobile.

Resize the logo for mobile with the Mobile Logo Image Size tweak.

Wexley

Use the Site Alignment tweak to set the logo as Left, Center, or Right on desktop. Logo is centered on mobile.

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

Logo displays in the header.

Use the Branding Position tweak in the Style Editor to set it to Left, Center, Right, or Hide it.

On mobile, the logo displays in the mobile bar.

Was this article helpful?
25 out of 107 found this helpful