Edit your logo, favicon, and brand colors

Last updated: July 25, 2024

Available with any of the following subscriptions, except where noted:

Users with Edit account defaults permission access can edit your brand's logo, favicon, and brand colors in your brand kit.

In your settings, set your logo and favicon, and your primary, secondary, accent, and additional brand colors. Brand colors will appear in the content editor, scheduling pages, quotes, and conversation channels, but won't appear in sales templates and emails.

Edit your logo

In your account settings, you can edit your default logo. You can override this logo for individual pieces of content.

In your HubSpot account, click the settings settings icon in the top navigation bar.
In the left sidebar menu, click Account defaults.
Click the Branding tab.
Click the brand kit you want to edit.
To add a new logo, click + Add in the Logos section.
Add your new logo:
- To add an existing image from the files tool as your logo, click Browse images. In the right panel, click the image.
- To add a new image, click Upload, then add an image from your computer.

In the Logo name field, enter a name for the logo. This field is required.
In the Logo alt text field, enter a description of your logo for search engines and screen readers. This will improve the accessibility and SEO of your site. Learn more about website accessibility in HubSpot's developer documentation.
In the Logo URL field, enter a URL if you want your logo to be clickable.
To resize your logo, enter a new dimension in the Width or Height field. The other field will automatically adjust to keep the image's proportions.
To add another logo, click + Add at the bottom of the Logos section.
To delete an existing image, hover over the image and click the X in the top right corner. To delete a logo, click the Actions dropdown menu, then select Delete.

When you're finished editing your logo, click Save in the bottom left.

You can override a default logo for specific content in the content editor or Design Manager. In the Logo module, click to toggle the Override default logo switch on, then upload a logo.

Edit your favicon

In account settings, you can customize your website's favicon, the small image in a browser tab next to the page title. Your favicon will only be applied to content hosted in HubSpot.

In your HubSpot account, click the settings settings icon in the top navigation bar.
In the left sidebar menu, click Account defaults.
Click the Branding tab.
Click the brand kit you want to edit.
To add a new favicon, click + Add in the Favicon section.
Add your new favicon:
- To add an existing image from the files tool as your favicon, click Browse images. In the right panel, click the image.
- To add a new image as your favicon, click Upload, then add an image from your computer.

Please note: for best results, save your favicon as a 48 by 48 px image in one of these file formats: .ico, .gif, .png.

In the Favicon name field, enter the name of your favicon.

When you're finished editing your favicon, click Save in the bottom left.

Edit your brand colors

You can set brand colors in your settings that'll appear in the content editor, as well as scheduling pages, quotes, and conversations channels. Brand colors will not appear in sales templates and emails.

In your HubSpot account, click the settings settings icon in the top navigation bar.
In the left sidebar menu, click Account defaults.
Click the Branding tab.
Click the brand kit you want to edit.
In the My brand kit section, click the Colors tab.
To set your brand colors:
- Primary color: the main color used in your brand. Under Primary color, enter a hexadecimal code or click the color picker and select a color. Then click Save. Primary color is a required field.
- Secondary color: the second most used color in your brand. Under Secondary color, enter a hexadecimal code or click the color picker and select a color. Then click Save.
- Accent colors: complement your primary and secondary brand colors. Under Accent color, enter a hexadecimal code or click the color picker and select a color. Then click Save. You can add up to three accent colors.
- Additional colors: aren't automatically used, but will be available in color pickers and can be referenced in development tools. Click add Add next to Additional colors, enter a hexadecimal code or click the color picker and select a color. Then click Save. You can add up to sixteen additional colors.
  - To delete an additional color, click delete delete next to the color you want to remove, then click Save.

branding-colors

Please note:

If your site refers to a color that is not set in the brand settings, it will use fallback logic:

The secondary color will default to the first additional color available.
The first accent color will default to the second additional color.
The second accent color will default to the third additional color.
The third accent color will default to the fourth additional color.
If additional colors are not set, it will use a default color value. If no default color is set, it will use the primary color as a fallback.

You can also import colors from a live page that already uses your brand colors:
- Click Import colors from URL.
- In the dialog box, enter the URL of a page using your brand colors and click Find colors.
- When the scan finishes, clear the checkbox next to any color you don't want to import, then click Import.

import-colors

Was this article helpful? Yes No

This form is used for documentation feedback only. Learn how to get help with HubSpot.

Edit your logo, favicon, and brand colors

Available with any of the following subscriptions, except where noted:

Edit your logo

Edit your favicon

Edit your brand colors

Related content