# `logo`

Use the `logo` section to display a custom logo in the project navbar.

Provide the path to the logo image as the value of the `image` property in the logo object.
The image file may be external or must exist in the project.

Alternatively, use `srcSet` to configure separate images for each color mode.

## Options

| Option | Type | Description |
| --- | --- | --- |
| image | string | **Conditionally required**. URL, path to an image file (PNG or SVG), or a Base64-encoded data URL. Mutually exclusive with `srcSet`. |
| srcSet | string | **Conditionally required**. Comma-separated list of logo file paths and corresponding color modes. When configured, the logo changes when the user switches between color modes. Mutually exclusive with `image`. |
| altText | string | Alternative text for the logo. |
| link | string | Logo link to a full URL including the protocol (for example, `https://www.redocly.com). |
| favicon | string | URL or path to the favicon (png or svg). |

## Examples

### Add a logo using a local file

The following is an example of `logo` configuration with `image` and `favicon` from project's assets.

```yaml
logo:
  image: ./images/logos/logo-example.svg
  altText: Amazing example logo
  link: "https://example.com"
  favicon: ./images/logos/favicon-example.svg
```

### Add a logo using a remote file

The following is an example of `logo` configuration with `image` and `favicon` from remote assets.

```yaml
logo:
  image: "https://example.com/logo-example.svg"
  altText: Amazing example logo
  link: "https://example.com"
  favicon: "https://example.com/favicon.ico"
```

### Add separate logo images for color modes

The following is an example of `logo` configuration with separate logo images for the light and the dark color mode.

```yaml
logo:
  srcSet: "./images/example-logo-light.svg light, ./images/example-logo-dark.svg dark"
  altText: Amazing example logo
  link: "https://example.com"
  favicon: ./images/logos/favicon-example.svg
```

### Add a logo using a Base64-encoded data URL

The following is an example of `logo` configuration with a Base64-encoded data URL for the logo.

```yaml
logo:
  image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
  altText: Amazing example logo
  link: "https://example.com"
```

## Resources

- **[Configuration options](/docs/realm/config)** - Explore other project configuration options for comprehensive documentation and platform customization
- **[Customize color modes](/docs/realm/branding/customize-color-modes)** - Set a different logo for each color mode, style light and dark modes with CSS, or add new color modes
- **[Navbar configuration](/docs/realm/config/navbar)** - Configure navbar settings and appearance to complement your custom logo design and branding