Logo and favicon

styles.logo

The logo at the top left of every page. It links to the site’s home page.

One image for both themes:

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

Or one per theme, each shown only in its theme:

{
  "styles": {
    "logo": {
      "light": "/images/logo-light.svg",
      "dark": "/images/logo-dark.svg"
    }
  }
}

All three are optional. With only light or only dark, the other theme shows no logo image.

The logo is shown on its own: a logo is usually already a wordmark, with the name in it. For a symbol with no name, add label to show text next to it. With label and no image, the topbar shows just the text:

{ "styles": { "logo": { "light": "/images/mark.svg", "dark": "/images/mark-white.svg", "label": "Acme Docs" } } }

Without styles.logo, the topbar shows the site’s name.

The logo is drawn 24 pixels high, with its width following its proportions. An SVG stays sharp at any size; for a PNG, use one at least 48 pixels high so it’s sharp on high-resolution screens.

styles.favicon

The icon in the browser tab and bookmarks:

{ "styles": { "favicon": "/images/favicon.svg" } }

An .svg, .png or .ico file all work. A square image works best.

Paths to images

A logo, favicon or background image is a path from your project folder, starting with /. The file can be in any folder:

my-docs/
├── writedocs.json
├── favicon.svg               →  "/favicon.svg"
└── images/
    └── logo-light.svg        →  "/images/logo-light.svg"

A full URL (https://cdn.example.com/logo.svg) works too. A file in a public/ folder at the project root is addressed without public: public/logo.svg is /logo.svg.

A different logo in the footer

The footer shows the same logo as the topbar. To show another one there, or none, set footer.logo - see Topbar, footer and socials.