Skip to content
Last updated

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

OptionTypeDescription
imagestringConditionally required. URL or path to the image file (png or svg) of the logo. Mutually exclusive with srcSet.
srcSetstringConditionally 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.
altTextstringAlternative text for the logo.
linkstringLogo link to a full URL including the protocol (for example, `https://www.redocly.com).
faviconstringURL 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.

redocly.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.

redocly.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.

redocly.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

Resources