Sections

Getting started

Branding

Customization

Enhancing content

Add a logo and favicon

One of the quickest and easiest changes you can make using our theme settings is to add your company logo and favicon. This guide covers how to add both and subsequently resize your logo, if required, to make sure you’re presenting your company brand in the best way possible.

In this article

By default, the logo is displayed within the header of your theme. The favicon is the small image displayed in the browser tab and next to the URL in the browser’s address bar.

Add a logo and favicon

To add or change the logo and favicon of your Help Center theme:

  1. In Zendesk Guide, click the Customize design icon (Customize icon) in the sidebar.
  2. Click Customize on the theme you want to edit.
  3. In the Settings panel, select the Brand section.
  4. Click the Replace link under Logo to browse for and select an image.

You can change back to the default image for the logo or favicon at any time by clicking on the Revert link.

Once you’ve finished making changes, click Publish to save them.

Company logos, like people, come in all shapes and sizes. Depending on the image you select, you may want to adjust the size of your logo in the header of your theme to ensure that it looks its best.

To do so, open the header.hbs template of your theme and locate your logo image. It should look something like this:

{{#link 'help_center' class='navbar-brand mr-auto'}}
  <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{/link}}

Notice that the logo image itself has the .h-6 height utility applied. Change this to a smaller height utility class (for example, .h-5) to make your logo smaller, or a larger height utility class (for example, .h-7) to make your logo bigger.

Alternatively you could use our max-height, width or max-width utilities to achieve the perfect size and aspect ratio for your logo.

Questions or feedback about this guide? Let us know