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.

Clicking your logo image always leads to your homepage.

Watch a video

This video applies to version 7.0.

Step 1 - 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:

Search engines index the title and display it in search results, so setting a site title is a best practice for SEO.
The title displays in browser tabs, helping visitors identify it.

For more help, visit Adding a site title.

Tip: Different text may appear in search results and browser tabs depending on your SEO title format.

Step 2 - 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. Each template treats logos differently, 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.

Step 3 - Add the logo image

How you add a logo image on a computer depends on your site's version.

Version 7.0
Version 7.1
Squarespace App

Hover over the title on any page and click Edit. This opens the Logo & Title panel.
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.
Click Save and refresh the page.

You can also open the Logo & Title panel in the Home Menu by clicking Design, then Logo & Title. If you're logged in but don't see the left panel, you may need to collapse the site preview.

To add a site logo, edit the header.

Tap Settings, then tap Logo & Title.
Tap Logo.
Tap Add Image in the top image uploader.
Choose an image:
- Tap Take photo to take a new photo with your device's camera.
- Tap Photo library to choose an existing image from your device.
- Tap Insert from... to choose an image from your iCloud library.
Tap Back to return to Logo & Title settings, then tap Save to publish your changes.

Step 4 - Style the logo image

Logo display varies by template. It may appear differently on mobile than on desktop.

In most templates, you can change the logo's size. Some templates have maximum heights or widths.
Where the logo displays is set by the template. The position may be different on mobile. In some templates, the position is adjustable.

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

Note: Styling the logo is only supported on desktop.

Remove a logo

How you remove a logo image on a computer depends on your site's version. When you remove a logo, your site title will reappear.

Version 7.0
Version 7.1
Squarespace App

In the Home Menu, click Design.
Click Logo & Title.
Scroll down and hover over your logo image. Click the trash can icon to delete the image.
Click Save.

To remove a site logo, edit the header.

Tap Settings, then tap Logo & Title.
Tap Logo.
Tap Remove under the image.
Tap Back to return to Logo & Title settings, then tap Save to publish your changes.

Create a logo with Squarespace Logo

Note: Squarespace Logo is only supported on desktop.

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

Use a logo with text

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.

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 Squarespace Logo creates 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 Answers forum for more information and example code.

Resize the logo

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.

Logo display by template

In most cases, the logo displays at the top of the site. To see how logos display in each template, visit Site title and logo display.