Change your favicon

A favicon is the tiny image that appears to the left of website names in browser tabs. Here is an example: Screenshot of a browser tab with an arrow pointing to the favicon to the left of the browser tab titleSample favicon If you are interested in learning more about them, take a look at the favicon Wikipedia article.

By default, when readers view your knowledge base, they will see a document favicon like this:

Screenshot of a browser tab where the favicon is a document iconDefault favicon in your knowledge base

Change your favicon

To change the favicon displayed when anyone views your knowledge base, you will need to have an .ico, .png, or .gif file of the image you'd like to use. We recommend using an .ico or .png file, as .gifs generally don't display as well as you want them to. 😉

If you don't have an existing file, there are a number of Favicon Generators and instructions online on how to create your own. Get creative!

Most favicon generators suggest a 100px x 100px image or icon. We recommend 32px x 32px, but the main point is to have something that's square and small.

Once you have your file:

  1. Go to Settings > Style.
  2. In the lefthand pane, click to expand the Favicon section.
  3. Select the Update Favicon button.
    The Favicon section
  4. This will open the Update Favicon pop-up. You can drag to add the file or click to browse to your file:The Update Favicon popup
  5. Once you've added your file, the window will display a preview of your file. If everything looks correct, click the Update Favicon button.
    Your uploaded favicon will display
  6. Be sure to Save your changes once you're done.

Your new favicon will now be live!

Our previous instructions for adding a favicon had you add some HTML code to the Custom <head>  section, which looked like this:

<link href="{url}" rel="shortcut icon" type="image/x-icon" />
For example:
Screenshot showing sample HTML with a relative href for the file URL, beginning with //Sample favicon HTML

If you already had a favicon in your knowledge base added this way, we recommend removing that line of HTML from your Custom <head> section after you've uploaded the favicon. The uploaded favicon will still work properly if you don't, but removing it helps to keep that Custom <head> section tidy!