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
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.
To update the title, hover over it and click Edit. For more help, visit Adding a site title.
To update the title:
- From the Home Menu, tap Design, then Logo & Title.
- Update the Site Title field.
For more help, visit Adding a site title.
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
To add the logo image:
- 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.
Tip: You can also open the Logo & Title panel from 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 the logo image:
- From the Home Menu, click Design, then Logo & Title.
- Scroll down to Logo Image. Tap the uploader area to take a photo or select a file.
- Tap Save.
Step 4 - Style the logo image
Logo display varies by template. It may appear differently on mobile than on desktop.
- Most templates allow you to adjust 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 Editor and visit our template guides.
Note: Styling the logo is only supported on desktop.
Remove a logo
If you no longer need your logo image:
- From 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.
Your site title will reappear.
If you no longer need your logo image:
- From the Home Menu, tap Design.
- Tap Logo & Title.
- In the Logo Image section, tap the trash can icon to delete the image.
- Tap Save.
Your site title will reappear.
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 Adobe Creative Cloud 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
To resize your logo, open your Style Editor and use the tweaks in the table below to change the size. Some templates have separate options for mobile, and some have maximum sizes.
Templates are grouped by family.
|
Template |
Desktop | Mobile |
|
Adirondack |
Logo Height | The site title always displays. |
|
Avenue |
Logo Size (Max) | Mobile Logo Size |
|
Aviator family Aubrey, Aviator |
Logo Size and Info Page Logo Size | Logo Size On Mobile and Info Page Logo Size |
|
Bedford family Anya, Bedford, Bryant, Hayden |
Logo Container Width Maximum height of 100 pixels. |
Logo Container Width Maximum height of 65 pixels. |
|
Brine family Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West |
Logo Width in the Header: Branding section. | Logo Width in the Mobile: Branding section. |
|
Farro family Farro, Haute |
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 family Julia, Kent, Montauk, Om |
Logo Size (Max) | Same as desktop. |
|
Native |
Logo Width | Same as desktop. Maximum height of 300 pixels. |
|
Pacific family Charlotte, Fulton, Horizon, Naomi, Pacific |
Logo Width | Same as desktop. Maximum height of 70 pixels. |
|
Skye family Foundry, Indigo, Ready, Skye, Tudor |
Logo Height | Same as desktop. |
|
Supply |
Logo Size | Fixed height. Check Use Site Title in Mobile Header to display site title instead. |
|
Tremont family Camino, Carson, Henson, 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 family Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York |
Logo Height (Max) | Logo Width in the Mobile: Bar section. |
Logo display by template
Here's how the logo displays for each template. Except where noted, the logo displays at the top of the site. Templates are grouped by family.
| Template |
Desktop |
Mobile |
| Adirondack |
Center. Site title displays instead of the logo when the header collapses to a fixed navigation bar on scroll. |
Center. Site title displays instead of the logo. |
| Avenue |
Left, center, or Right. Use the Layout Style tweak to set the position. |
Center. |
|
Aviator family Aubrey, Aviator |
Center. For the Info Page only, use the Info Page Layout tweak to center or left-align. |
Center. |
|
Bedford family Anya, Bedford, Bryant, Hayden |
Left. | Left. |
|
Brine family Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West |
Left, center, or right, in the top or bottom header. Can be hidden. Use the Branding Position tweak in the Header: Layout section to set the position or hide. |
Left, center, or right, in the top or bottom mobile bar. Can be hidden. Use the Position tweak in the Mobile: Branding section to set the position or hide. |
|
Farro family Farro, Haute |
Left, center, or right. Can be hidden. Use the Branding Position tweak in the Header: Layout section to set the position or hide. |
Can display in the left, right, or center of the top or bottom mobile bar. Use the Position tweak in the Mobile: Branding section to set the position. |
| Five |
When Banner Content: Site Title Logo is selected, use the Banner Alignment tweak to choose left, center, or right. When Banner Content: Page Title Description is selected, use the Top Navigation Alignment tweak to choose left, center, or right. |
Center. Only displays when Banner Content: Site Title Logo Tagline is selected. Otherwise, the site title displays. |
| Flatiron |
Right or left. Use the Site Title/Logo Position tweak to set the position. |
Center. |
| Forte | Left. | Left. |
| Galapagos |
Center. |
Center. If you don't have a mobile-specific logo, the site title displays in its place. |
| Ishimoto |
Left, center, or right. Use the Header Alignment tweak to set the position. |
Left. |
| Momentum |
Left, in the navigation bar (can be top or bottom). Use the Navigation Position tweak to move the navigation bar. |
Center, in the navigation bar. |
|
Montauk family Julia, Kent, Montauk, Om |
Left, center, or right. Use the Canvas Style tweak to set the position. |
Center. |
| Native | Center. | Center. |
|
Pacific family Charlotte, Fulton, Horizon, Naomi, Pacific |
Center. | Center. |
|
Skye family Foundry, Indigo, Ready, Skye, Tudor |
Center. | Center. |
| Supply |
Displays at the top of the navigation sidebar. |
Left. Only displays if Use Site Title in Mobile Header is unchecked. |
|
Tremont family Camino, Carson, Henson, Tremont |
Left, in the header. The header disappears when you scroll down. |
Left, in the header. The header disappears when you scroll down. |
| Wells |
Displays at the top of the navigation sidebar (left or right). |
Displays on the same side as desktop. |
| Wexley |
Left, center, or right. Use the Site Alignment tweak to set the position. |
Center. |
|
York family Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York |
Left, center, or right. Use the Branding Position tweak in the Site: Header Layout section to set the position. You can also stack header elements. |
Left, center, or right, in the mobile bar. Use the Branding Position tweak in the Mobile: Bar section to set the position. Use the Mobile Bar Position tweak to set where the bar displays. |