Edit a brand's logo, favicon, brand colors, fonts, and theme

Use brand kits to manage branding assets for a HubSpot account. In your brand kit, add or edit your logo, favicon, brand colors, theme, and fonts to keep branding consistent across HubSpot-hosted content and supported tools.

For example, you can set default brand colors that appear in the content editor, scheduling pages, quotes, and conversation channels. If you have the Brands add-on, you can create and manage a brand kit for each Brand.

Learn more about how editing a brand kit improve AI results.

Add, edit, or delete a logo

On the Brand Kit tab, edit your default logo. You can override this logo for individual pieces of content. 

1. In your HubSpot account, click More, then navigate to Marketing > Brand. If More doesn't appear in your account, navigate to Marketing > Brand directly.
2. If you're using the Brands add-on, click the dropdown menu in the top-right and select the Brand you'd like to update the logo for.
   
   
3. On the Brand Kit tab, click Add logo +.
4. In the right panel, 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.
5. In the Logo name field, enter a name for the logo. This field is required. 
6. In the Logo alt text field, enter a description of your logo for search engines and screen readers. This improves the accessibility and SEO of your site. Learn more about website accessibility in HubSpot's developer documentation. 
7. In the Link field, enter a URL if you want your logo to be clickable. 
8. To make this logo the default, click the Yes. To assign the logo to a domain, click No. Then, click the domain dropdown menu to select a domain.
9. Click Save.
10. To edit or delete a logo or to set a logo as the default, click the verticalMenuIconvertical menu icon, then click Set as default, Edit logo or Delete logo.

Add, edit or delete a favicon

On the Brand Kit tab, customize your website's favicon, the small image in a browser tab next to the page title. The favicon will only be applied to content hosted on HubSpot. you can add up to 20 favicons per Brand.

1. In your HubSpot account, click More, then navigate to Marketing > Brand. If More doesn't appear in your account, navigate to Marketing > Brand directly.
2. If you're using the Brands add-on, click the dropdown menu in the top-right and select the Brand you'd like to update the logo for.
   
   
   
3. On the Brand Kit tab, click Add Favicon +. 
4. In the right panel, add your new favicon:
   
   • To add an existing image from the files tool as your logo, click Browse images. Then, click the image. 
   • To add a new image, click Upload, then add an image from your computer. 
5. In the Favicon name field, enter a name for the favicon. 
6. To make the favicon the default, select Yes. To assign the favicon to a domain, click No. Then, click the domain dropdown menu to select a domain.
7. Click Save.
8. To edit or delete a favicon or to set a favicon as the default, click the verticalMenuIconvertical menu icon, then click Set as default, Edit favocon or Delete favicon.
   
   
   
   
   

Add, edit, or delete brand colors

Set brand colors on the Brand Kit tab that'll appear in the content editor, as well as scheduling pages, quotes, and conversations channels. Brand colors won't appear in sales templates and emails.

1. In your HubSpot account, click More, then navigate to Marketing > Brand. If More doesn't appear in your account, navigate to Marketing > Brand directly.
2. If you're using the Brands add-on, click the dropdown menu in the top-right and select the Brand you'd like to update the logo for.
   
   
3. On the Brand Kit tab, click Edit Colors.
4. To set your brand colors, in the right panel:
   • To import your colors from a URL, click Import colors from URL.
     • In the dialog box, enter the URL of a page using your brand colors and click Find colors. 
     • Drag and drop the colors you want to use next to the color you want to assign them to. For example, drag #754262 to the Primary color section.
       
       
       
   • To enter the hexadecimal code or select 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. 
     • 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.
     • Accent colors: colors that complement your primary and secondary brand colors. Under Accent color, enter a hexadecimal code or click the color picker and select a color. 
     • Additional colors: these 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. To delete an additional color click Delete.
5. Click Save.
6. To delete a brand color, click the deleteIcondelete icon next to the color.

Add, edit, or delete fonts

Please note: adding fonts in brand settings sets the default fonts available for HubSpot content tools. For pages using custom themes, coded templates, or custom stylesheets, you may also need to load the font in your template or stylesheet. For Google Fonts, add the font’s @import statement to the stylesheet used by the page.

Set primary, secondary, and custom fonts on the Brand Kit tab that'll be used across your content.

Add fonts

1. In your HubSpot account, click More, then navigate to Marketing > Brand. If More doesn't appear in your account, navigate to Marketing > Brand directly.
2. If you're using the Brands add-on, click the dropdown menu in the top-right and select the Brand you'd like to update the logo for.
   
   
3. On the Brand Kit tab, In the Fonts section, click Edit for the font you want to change
4. In the right side bar, Select font dropdown menu.
5. Enter the font name in the search bar, or select the font from the list.
6. To set a custom font that'll be available in the font selector in content editors click + Add a custom font.
   • In the Font name field, enter the name of your font.
   • Click Choose font file(s).
   • Select the font files to upload from your computer. Supported file formats: TTF, OTF, and WOFF.
   • Click + Upload more files to add more font files.
   • Click Next.
   • Use the dropdown menus to select a corresponding font style.
   • Click + Add another font style to add additional styles.
7. Click Save.

Edit or delete custom fonts

To edit custom fonts:

1. In your HubSpot account, click More, then navigate to Marketing > Brand. If More doesn't appear in your account, navigate to Marketing > Brand directly.
2. If you're using the Brands add-on, click the dropdown menu in the top-right and select the Brand you'd like to update the logo for.
   
   
3. On the Brand Kit tab in the Fonts section, under Custom fonts, next to the existing font, click Actions, then select Edit or Delete. 

• • Use the dropdown menus to select a corresponding font style.
  • Click + Add another font style to add additional styles.
  • Click Save.

Change a theme

A theme is a set of templates, modules, global content, and style settings that can be used to create a website. Edit pages and posts using a theme in the content editor and set blog templates to use a theme in your blog settings.

All accounts have access to at least one default HubSpot theme. Themes can also be downloaded from the Template Marketplace.

Please note: knowledge bases use a modified version of themes. Learn more about editing knowledge base theme settings.

To change a theme:

1. In your HubSpot account, click More, then navigate to Marketing > Brand. If More doesn't appear in your account, navigate to Marketing > Brand directly.
2. If you're using the Brands add-on, click the dropdown menu in the top-right and select the Brand you'd like to update the logo for.
   
   
3. On the Brand Kit tab, click Set theme or Change theme to select a different theme.
   • Your available themes will be displayed. Click Set as active theme next to the theme you'd like to use for your brand.
   • Enter a theme name in the Search bar to search for a theme.
   • Your available themes will be displayed. Click Set as active theme next to the theme you'd like to use for your brand.
   • Enter a theme name in the Search bar to search for a theme.
4.  Click Edit / Preview to edit your theme settings.