Users with Edit account defaults permission access can edit your brand's logo, favicon, and brand colors in your brand kit.
Please note: To help you manage your brand's logos and favicons across content from one place, HubSpot will be moving all branding settings from Website > Pages > Branding to Brand Kit settings on a phased rollout beginning April 8th, 2024 and finishing in June. Whilst your account may not be included in the first phases, we advise that you set your desired primary logo and favicon before the rollout begins. HubSpot will automatically migrate domain-specific logos and favicons from pages branding to brand kits, preserving their domain association. If your brand kit's primary logo or favicon is empty on the date your account is included in the rollout, and you have a default logo or favicon set in pages settings, we will migrate that logo or favicon over to your brand kit.
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 Brandingtab.
- Click thebrand kityou 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, clickBrowse images. In the right panel, click the image.
- To add a new image, clickUpload, then add an image from your computer.
- In theLogo namefield, enter anamefor the logo. This field is required.
- In theLogo alt textfield, enter adescriptionof 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 theLogo URLfield, enter a URL if you want your logo to be clickable.
- To resize your logo, enter a new dimension in the WidthorHeightfield. The other field will automatically adjust to keep the image's proportions.
- To add another logo, click+ Addat the bottom of theLogossection.
- To delete an existing image, hover over the image and click the Xin the top right corner. To delete a logo, click the Actionsdropdown menu, then select Delete.
- When you're finished editing your logo, click Savein 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 logoswitch 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 Brandingtab.
- Click thebrand kityou want to edit.
- To add a new favicon, click + Addin theFavicon 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 theFavicon name field, enter thenameof your favicon.
- When you're finished editing your favicon, clickSavein the bottom left.
Edit your brand colors
You can set brand colors in your settings that will appear in the content editor, as well as scheduling pages, quotes, and conversations channels. Brand colors willnotappear 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 Brandingtab.
- Click thebrand kityou want to edit.
- In the My brand kit section, click the Colorstab.
- To set your primary color color, enter a hexadecimal code or click thecolor pickerand select acolor. The primary color is used in scheduling pages, quotes, and conversations channels.
- To add more brand colors, click+ Add, then enter a hexadecimal code or click thecolor pickerand select acolor. To delete a non-primary color, click the deletedelete icon next to the color.
- 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 URLof a page using your brand colors and click Find colors.
- When the scan finishes, clear the checkboxnext to any color you don't want to import, then clickImport.
