Site details

Name and description#

name appears in the header beside your logo and in browser page titles. description supplies the default meta description for any page that does not define one in its frontmatter.

{
  "name": "Acme Docs",
  "description": "Guides and API documentation for Acme."
}

Individual pages can override the description in frontmatter:

---
title: Authentication
description: Authenticate requests to the Acme API.
---

Logo#

Set logo to an image path to use the same logo in light and dark mode. Put the image in your project's public folder; /logo.svg refers to public/logo.svg.

{
  "logo": "/logo.svg"
}

To use a different image for each color mode, provide light and dark paths, plus href to choose where the logo links (defaults to the documentation home):

{
  "logo": {
    "light": "/logo-light.svg",
    "dark": "/logo-dark.svg",
    "href": "https://example.com",
    "target": "_blank"
  }
}

Favicon#

favicon sets the small icon shown in browser tabs and bookmarks. Square PNG or SVG images work best. Without this setting, the browser uses its default icon.

{
  "favicon": "/favicon.png"
}

Theme#

New Shiso sites include this setting by default:

{
  "theme": "shiso"
}

"shiso" is the available layout theme and is also the default, so you can omit theme without changing the site.

Complete example#

{
  "theme": "shiso",
  "name": "Acme Docs",
  "description": "Guides and API documentation for Acme.",
  "logo": {
    "light": "/logo-light.svg",
    "dark": "/logo-dark.svg"
  },
  "favicon": "/favicon.png"
}

To change colors, fonts, or color mode, continue to Appearance.

Back to Configuration overview.