White Cabinet

Hugo Theme

Change the logo, favicon, and top figures

Posted on 9 Mar, 2020

You can use your original logo and favicon to represent your website. Also, you can set several images to be shown as a slideshow on the top part of the top page.

topfigures_headermenu_fig

Setting the logo image and top figures

The logo and image files should be placed under the directory “static”. Assuming that the root directory of the site is /foo/bar, place the logo as /foo/bar/static/img/logo.png and the top figure as /foo/bar/static/img/topfig1.jpg, etc.

Then, set the path to these files in the config.toml as:

[Params]
  logo = "img/logo.png"
  top_figures = [
  "img/topfig1.jpg",
  "PATH TO FILE2",
  "PATH TO FILE3",
  ...
  ]

Setting the favicon image

You can make your custom favicon image for your website. The default method is to generate a set of images and files required for a multi-platform favicon with the help of a third-party favicon generator such as the Real Favicon Generator. The generated files should be placed in the directory specified by the faviconDir parameter in the config.toml:

[Params]
   faviconDir = "img/favicon"

Then the icon file static/img/favicon/favicon.ico, image file static/img/favicon/android-chrome-192x192.png, etc. will be automatically read and displayed on the browser.

Display the color ribbon

If you want to display the color ribbon, which is shown in a figure, add ribbon_color parameter with hex color like:

[Params]
...
  ribbon_color = "#a9a9a9"
...

. If ribbon_color is null or empty, a ribbon is not displayed.