---
title: "Branding"
description: "Put your name, logo, favicon, colours and share cards on a Nimbus site."
---

> Documentation Index
> Fetch the complete documentation index at: https://nimbus-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding

Five changes make a Nimbus site look like your product. Each is a file or an option you own.

## Name

Set `title` and `description` in the Nimbus config in `astro.config.ts`. The title appears in every page's `<title>`, in share cards and in `llms.txt`; the description is the site's default meta description.

## Logo

The logo is drawn once, in `src/components/logo.ts`: its box and SVG paths. The header and phone menu (`Logo.astro`) and every share card read it. Replace the paths with your mark to rebrand them all. Keep it a single-colour mark, since each place fills it with its own text colour.

For a multicolour logo or an image, change `Logo.astro` to render it:

```astro title="src/components/Logo.astro"
---
interface Props { class?: string }
const { class: cls = "h-5 w-auto" } = Astro.props;
---
<img src="/logo.svg" alt="" class={cls} />
```

The share cards still draw `logo.ts`, so replace that too, or change the cards as [Customize OG cards](/ai/override-markdown#customize-og-cards) shows.

The header keeps the site title as the link's accessible name, so the logo itself needs no text. To show your name beside the mark, add it inside `Logo.astro`.

## Favicon

Put `favicon.svg`, `favicon.ico` or `favicon.png` in `public/`. Nimbus links the first it finds, in that order.

## Colours

The accent is two tokens in `src/styles/globals.css`, one for light mode and one for dark:

```css title="src/styles/globals.css"
:root {
  --nb-brand: oklch(0.55 0.2 265);
}

[data-mode="dark"] {
  --nb-brand: oklch(0.8 0.12 265);
}
```

`--nb-brand` colours the current page in the sidebar and the icons in cards. Check that text in the brand colour still reads at 4.5:1 against the background in both modes. [Theme and tokens](/styling/theme-and-tokens) lists every token, including the neutrals, radius and fonts.

## Share cards

Nimbus draws a share card for every page at build time: the logo, the page's section and its title. Its colours, fonts and layout are in `src/pages/og/_card.ts`; see [Customize OG cards](/ai/override-markdown#customize-og-cards). A page's `socialImage` frontmatter replaces its card with your own image. See [Metadata and SEO](/publish/metadata-and-seo).

Source: https://nimbus-docs.com/styling/branding/index.mdx