# Logo and favicon

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

The logo in the topbar and footer, with a version for dark mode, and the icon in the browser tab.

## `styles.logo`

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

One image for both themes:

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

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

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

**`light`** `string`

The logo in light mode.

**`dark`** `string`

The logo in dark mode.

**`label`** `string`

Text shown next to the logo.

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:

```json
{ "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:

```json
{ "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](https://preview.writedocs.io/docs/configuration/topbar-and-socials/#footer-logo).