If you like my work, please consider supporting its development.

Add a thumbnail - like a personal photo or company logo - to the site header by setting params.thumbnail in your site’s configuration file to the path to the thumbnail image in the assets folder. Give it a rounded edge by setting params.thumbnail_radius to a valid CSS border-radius value. Images are scaled down to a maximum height of 128 pixels, approximately the height of the header with a site title and tagline.

Thumbnail/logo images are hidden when there is not enough space for the image and the website title on the screen. This must be done with JavaScript and, due to limitations in determining the dimensions of the image using JavaSript, users on a slow connection may see the thumbnail image on a line above the title before the JavaScript executes.

Midnight also adds a line of metadata to every page on the site defining that image as the site’s thumbnail. This tells search engines and other sites to use that image in URL previews.

[params]
  thumbnail = "path/to/thumbnail.png"
  thumbnail_radius = "10%"
params:
  thumbnail: path/to/thumbnail.png
  thumbnail_radius: 10%
{
    "params": {
        "thumbnail": "path/to/thumbnail.png",
        "thumbnail_radius": "10%"
    }
}