Favicons

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: http://en.wikipedia.org/wiki/Favicon

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 to your knowledge base readers, you will need to have an .ico file of the favicon you'd like to use. 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.

Once you have your file, you'll upload it to your knowledge base and then edit your Custom Head html to add the file there. We'll walk you through the steps below:

  1. To upload your favicon file, go to Library > Files.
  2. Click the + Add Files button. This will open a pop-up where you can drag to add files or browse to the files you need.
  3. Once you've added your file using either method, select the Upload Files button.
  4. This will upload the file to the library.
  5. Click on the thumbnail of the file in your library, which will open details for that file in the lower left of the screen.
  6. Copy the URL displayed there. (For more detailed instructions on these steps, and screenshots, see Find the URL to your File Library file.)
  7. Now, go to Settings > Style.
  8. Below the preview pane, be sure Custom <head> is selected.
  9. Add this code to the Custom head text box, replacing {url} with the image URL you have copied to your clipboard:
    <link href="{url}" rel="shortcut icon" type="image/x-icon" />
  10. We recommend removing the "https:" from the start of the file URL, so the final result will look something like this:
    Screenshot showing sample HTML with a relative href for the file URL, beginning with //Sample favicon HTML
  11. Once you've added the code to your Custom <head>, be sure to Save your changes.