Adding a site logo

Display a logo that's unique to your brand in your site header.

Last updated December 17, 2024

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.

Watch a video

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 how you'd like it to display. We don't require exact dimensions for site logos. However, on version 7.0, some templates have a maximum logo height or width. For template-specific details, go to Resizing a logo on version 7.0.
  • 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 your site title or logo, then click the pencil icon.
  4. In the Logo Image or Mobile Logo Image sections, click + to add a new image:
    • To upload an image from your device, select Upload File.
    • To reuse an image, click Select From Library.
  5. Use the sliders to change the logo height on responsive screens or on mobile.
  6. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

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 open the Design panel, then click 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 More, tap Design, then tap 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.

After adding an image, you can:

Logo display

Usually, 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.

You can change the position and size of the logo for both the computer and mobile view:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. In the top-right corner of your screen, select the Computer icon for desktop view.
  4. Click Edit Design
  5. Click the current layout to review all options, then click the layout you prefer.
  6. In the top-right corner of your screen, click the Mobile icon and follow the same steps to set your logo position for mobile view.  
  7. Click the Computer icon to return to the main Header editor.
  8. Click your logo, then the pencil icon.
  9. Use the sliders to change your Logo Height and Mobile Logo Max Height. The computer header layout you’ve selected may limit your logo height.
  10. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

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.

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 your logo, then the pencil icon.
  4. Under your logo image, click Replace to choose a new logo. To delete your logo, click the three dots, then select Remove.
  5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

To remove the site logo:

  1. Open the Design panel, 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 More, tap Design, 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.

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 and we can't offer more help on this topic.

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.

How you resize your logo depends on your template family. Open the Design panel and use the tweaks below to increase or decrease your logo's size. 

Template family Computer Mobile

Adirondack

Logo Height. Maximum height of 125 pixels. The site title always displays.

Avenue

Logo Size (Max). Maximum size of 300 pixels. Mobile Logo Size. Maximum size of 300 pixels.

Aviator

Logo Size and info page Logo Size. Maximum size for both logos is 100%. Logo Size On Mobile and info page Logo Size. Maximum size is 100%.

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. Maximum width of 320 pixels. Logo Width in the Mobile: Branding section. Maximum width is 240 pixels, but is constrained by the Mobile Breakpoint.

Farro

Logo Width in the Header: Branding section. Maximum width of 320 pixels. Logo Width in the Mobile: Branding section. Maximum width of 240 pixels.

Five

Logo Height (Banner) and Logo Height (Navigation). Both are maximum height of 480 pixels.

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

Flatiron

Logo Image Height. Maximum height of 200 pixels. Same as computer.

Forte

Logo Image Max-Height. Maximum height of 200 pixels. Same as computer.

Galapagos

Site Logo Width. Maximum width of 100%. For the mobile-specific logo: Nav Height.

Ishimoto

Logo Image Size. Maximum size of 240 pixels. Same as computer.

Momentum

Logo Image Height. Maximum height of 100 pixels. Fixed height.

Montauk

Logo Size (Max). Maximum size of 300 pixels. Same as computer.

Native

Logo Width. Maximum width of 1280 pixels. Same as computer. Maximum height of 300 pixels.

Pacific

Logo Width. Maximum width of 300 pixels. Same as computer. Maximum height of 70 pixels.

Skye

Logo Height. Maximum height of 120 pixels. Same as computer.

Supply

Logo Size. Maximum size of 160 pixels. Fixed height. Check Use Site Title in Mobile Header to display site title instead.

Tremont

Logo Height. Maximum height of 150 pixels. Tablet: Logo Height and Mobile: Logo Height. Both maximum height of 150 pixels.

Wells

Logo Image Width. Maximum width of 600 pixels. Mobile Logo Image Size. Maximum size of 255 pixels.
Wexley Logo Image Size (Max). Maximum size of 200 pixels. Same as computer.

York

Logo Height (Max). Maximum height of 300 pixels. Logo Width in the Mobile: Bar section. Maximum width of 240 pixels.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.