Start A Free Trial

Followers:

Asked: Updated: Followers:

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

Adding a site logo

Last updated

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.

Clicking your logo image always leads to your homepage.

Add a site title

Before adding your logo, ensure you've replaced the default Your Site Title placeholder text with the name of your site because:

  • The site title creates the logo's alt text.
  • Search engines index the site title and may display it in search results, so setting a site title is a best practice for SEO.
  • The site title may display in browser tabs, depending on your SEO title format.

For more help, visit Adding a site title.

Prepare your logo image

For best results:

  • Before uploading your logo, ensure it's a similar height to that which you'd like it to display. On version 7.0, logos display differently across templates, and some use the original image size as the display size.
  • When in doubt, it's better to start with a larger image, as smaller images may become pixelated when they resize.
  • Your logo can be in .jpg, .gif, or .png format. See our image requirements for more information.
  • The logo replaces the site title. To include text in your logo, see our tips below.

If you don't have a logo yet, you can create one with Squarespace Logo. It's not possible to use stock images for your logo. 

Add a logo image

How you add a logo image on a computer depends on your site's version. You can also add a logo on the Squarespace App.

To add a logo image:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. Click Site Title & Logo.
  4. In the Logo Image section, drag your image into the image uploader, or click anywhere in the uploader area to select a file from your computer.
  5. Scroll down to change the logo height on responsive screens or on mobile. 
  6. Hover over Done, then click Save. 

To add a logo image:

  1. Hover over the title on any page and click Edit. This opens the Logo & Title panel. (You can also go to the Home Menu and click Design, then Logo & Title.)
  2. Scroll down to Logo Image. Drag your image into the image uploader, or click anywhere in the uploader area to select a file from your computer.
  3. Click Save and refresh the page.

To add a logo image:

  1. Tap Settings, then Logo & Title. 
  2. Tap Logo.
  3. Tap Add image.
  4. Choose an image:
    • Take a new photo - Tap Take photo or Camera.
    • Choose an image from your device - Tap Photo library or Files.
    • Choose an image from iCloud - Tap Insert from....
  5. Tap Back to return to Logo & Title settings, then tap Save to publish your changes.

Logo display

In most cases, the logo displays at the top of the site. How you style your logo depends on your site's version. Styling the logo is only supported on a computer.

To change the position and size of the logo:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. Click Header Layout, then click the layout you prefer. 
  4. Click Back to return to the main Header editor.
  5. Click Site Title & Logo.
  6. Use the sliders to change the Logo Height and Mobile Logo Max Height. 
  7. Hover over Done and click Save. 
Tip: On mobile, the site title always appears on the left side of the header.

The default position and options to move your logo vary by template, and may appear differently on mobile. To learn more, visit Site title and logo display.

To learn more about your site's logo settings, explore your template's style options and visit our template guides.

In most templates, you can change the logo's size. Some templates have maximum heights or widths.

Remove a logo

How you remove a logo image on a computer depends on your site's version. You can also remove the logo on the Squarespace App. When you remove a logo, your site title will reappear.

To remove the site logo, edit the header:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. Click Site Title & Logo.
  4. Under the logo image, click Delete.
  5. Hover over Done and click Save.

To remove the site logo:

  1. In the Home Menu, click Design, then click Logo & Title.
  2. Scroll down and hover over your logo image. Click the trash can icon to delete the image.
  3. Click Save.
  1. Tap Settings, then tap Logo & Title.
  2. Tap Logo.
  3. Tap Remove under the image.
  4. Tap Back to return to Logo & Title settings, then tap Save to publish your changes.

Use a logo with text

It isn't possible to display a logo and site title at the same time. Instead, use a logo image that includes your site title text.

Since text in the logo image file isn't indexable by search engines, we recommend keeping your site title text in the Site Title field when using a logo.

Transparent backgrounds

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 use Squarespace Logo to create transparent backgrounds automatically.

Note: If you edit your image with our built-in Image Editor, it saves as a .jpg, and all transparency will be lost. To maintain the .png format, use third-party software instead.

Redirect the logo

Clicking your logo image always leads to your homepage. The logo 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 Squarespace Forum for more information and example code.

Resizing a logo on version 7.0

Tip: If your site is on version 7.1, use the header settings to change the logo size. 

Use the tweaks below to resize your logo in these template families:

Template family Computer Mobile

Adirondack

 Logo Height The site title always displays.

Avenue

 Logo Size (Max) Mobile Logo Size

Aviator

 Logo Size and Info Page Logo Size Logo Size On Mobile and Info Page Logo Size

Bedford

Logo Container Width. Maximum height of 100 pixels.

Logo Container Width. Maximum height of 65 pixels.

Brine

 Logo Width in the Header: Branding section. Logo Width in the Mobile: Branding section.

Farro

 Logo Width in the Header: Branding section. Logo Width in the Mobile: Branding section.

Five

 Logo Height (Banner) and Logo Height (Navigation)

Same as desktop. Only displays when Banner Content: Site Title Logo Tagline is selected.

Flatiron

 Logo Image Height Same as desktop.

Forte

 Logo Image Max-Height Same as desktop.

Galapagos

 Site Logo Width For the mobile-specific logo: Nav Height.

Ishimoto

 Logo Image Size Same as desktop.

Momentum

 Logo Image Height Fixed height.

Montauk

 Logo Size (Max) Same as desktop.

Native

 Logo Width Same as desktop. Maximum height of 300 pixels.

Pacific

 Logo Width Same as desktop. Maximum height of 70 pixels. 

Skye

 Logo Height Same as desktop.

Supply

 Logo Size Fixed height. Check Use Site Title in Mobile Header to display site title instead.

Tremont

 Logo Height Tablet: Logo Height and Mobile: Logo Height

Wells

 Logo Image Width Mobile Logo Image Size
Wexley Logo Image Size (Max) Same as desktop.

York

 Logo Height (Max) Logo Width in the Mobile: Bar section.

Watch a video

This video applies to version 7.0.

Was this article helpful?
127 out of 812 found this helpful

Related articles

Navigation
    1. Squarespace Help
    2. Images and Videos
    3. Banners, backgrounds, and logos
    Adding a site logo