Skip to main content
How to Add a Team Logo
Updated over 5 months ago

Permissions are required to add a team logo. Click here to learn how to view your permissions.

NOTE: GIF and PNG formats allow for transparent sections, which allows your site background to show through.

  1. In the side menu, click Website Design.

  2. Click the Team Logo overlay.

    • Generally located at the top and/or bottom of the page.

      Team Logo overlay
  3. If there is an existing logo and you want to replace it, click in the upper right of the logo to delete it, then click Remove to confirm.

  4. Drag and drop a logo (up to 1200x1200 pixels!) onto the dotted line area, or click the area and then double-click the desired logo.

  5. Although the logo will automatically resize for mobile devices, those with a squarish logo can upload an alternative logo into the rectangular Optional mobile header logo area to take advantage of the mobile header format.

    • The aspect ratio for phones: 5:1 (300x60 pixels)

    • The aspect ratio for tablets: 13:1 (700x54 pixels). Since you can only upload one mobile logo, we recommend using the phone version, as the tablet version will appear as a tiny, thin logo on the phone.

  6. You may also upload an Optional email communications logo. This will be included in emails you send instead of the default team logo.

  7. Display mode — Leave as Relative to let the system resize the logo for different screen sizes. It will generally expand to fill the size of the logo container. Select Absolute to enter specific sizes for each format if you want more control.

  8. Alternate text — Type your team or org name to be read aloud by screen readers for the visually impaired and crawled by search engines for SEO.

  9. Horizontal alignment — If the Team Logo container is wider than the logo, you can set the logo in the Left, Center, or Right part of the container.

  10. Vertical alignment — If the Team Logo container is taller than the logo, you set the logo to be in the container's Top, Center, or Bottom part.

  11. Click Link to — Navigate to a page or URL when the user clicks the logo. If you set this, we recommend simply setting it to your home page. Click the page icon and select Home. Set Open Link in to Same Window.

  12. Click Save.

  13. After making changes, click the tablet and phone icons in the upper right to ensure the logo works for those sizes.

    Tablet and phone buttons

Best Practices for Logo Placement

Organizations typically place their logo at the site's top and bottom. Some templates show the logo on every page in the footer and top two layout sections, and some in the top three, which gives you flexibility in its placement.

Below are the maximum sizes, in pixels, for each template. The logo will be displayed in each layout section. These numbers are smaller if you have other components in the same layout section as the logo.

Business (2 sections)
1200x1200 1st
1200x1200 2nd
1200x1200 footer

Classic (3 sections)
1200x1200 1st
1229x1229 2nd
1229x1229 3rd
912x912 footer

Minimal (2 sections)
1890x1890 1st
Full browser width - 2nd
354x354 Footer

Clean (3 sections)
1004x1004 1st
1173x1173 2nd
1245x1245 3rd
308x308 footer

Did this answer your question?