# Brand Display

Brand display controls how your site name and logo appear in the header, footer, and anywhere in your page content. Set the logo in `settings/meta.md`, choose a display mode per location, and use image modifiers to style the logo.

## How do I set the brand image?

Set `brandImage` in `settings/meta.md` to point to your logo file:

```yaml
# settings/meta.md
brandImage: /media/logo.svg
```

Place the file in `media/` or `theme/images/`. SVG is recommended for crisp rendering at any size. PNG and JPG also work. The default is `/theme/images/logo.svg`.

See [Site Identity](/docs/site-identity#brand-image-logo) for full details on logo and favicon setup.

## Display modes

Four modes control what the brand element shows:

| Mode | What it renders |
|---|---|
| `text` | Brand name only (default) |
| `image` | Logo only |
| `image-text` | Logo left, brand name right |
| `text-image` | Brand name left, logo right |

The brand name defaults to `brandName` in `settings/meta.md`. The header and footer can each override it with their own `brandName` field.

## Header brand

Set `brandDisplay` in `settings/header.md`:

```yaml
# settings/header.md
brandDisplay: image-text
```

The header brand always links to `/`. See [Header](/docs/header#brand-display) for navigation and other header settings.

## Footer brand

Add `brandDisplay` to `settings/footer.md` to show the brand in the copyright row:

```yaml
# settings/footer.md
brandDisplay: image-text
```

The footer brand renders centered in the copyright row, between the copyright text and the sitemd badge. All four display modes work. When not set, no brand element appears in the footer.

Override the brand name shown in the footer without affecting the header:

```yaml
# settings/footer.md
brandName: My Company Inc.
brandDisplay: text
```

## Image modifiers on brand images

Brand images support the same [image modifiers](/docs/images#image-modifiers) as content images. Append modifiers to the `brandImage` value in `settings/meta.md`:

```yaml
# settings/meta.md
brandImage: /media/logo.png +circle +height:32
```

All modifiers work:

| Modifier | Example |
|---|---|
| `+width:N` | `brandImage: /media/logo.png +width:120` |
| `+height:N` | `brandImage: /media/logo.png +height:32` |
| `+circle` | `brandImage: /media/logo.png +circle` |
| `+bw` | `brandImage: /media/logo.png +bw` |
| `+sepia` | `brandImage: /media/logo.png +sepia` |
| `+corner:curve` | `brandImage: /media/logo.png +corner:curve` |
| `+crop:WxH` | `brandImage: /media/logo.png +crop:100x40` |

Modifiers are parsed once and applied everywhere the brand image appears — header, footer, and content variables.

See [Images — Modifier Reference](/docs/images#modifier-reference) for the full list.

## Content variables

Insert your brand anywhere in page content with two template variables. Both render as block-level elements on their own line, matching the header's styling.

### {{brandDisplay}}

Renders the full brand element (image and/or text) based on your `brandDisplay` setting:

```markdown
{{brandDisplay}}
```

This renders the same image-and-text combination configured in your header, without the link wrapper.

#### Scaling with +width

Add `+width:N` to scale the entire brand element up or down. The image and text scale proportionally together:

```markdown
{{brandDisplay +width:100}}
{{brandDisplay +width:200}}
{{brandDisplay +width:400}}
```

The default size matches the header. `+width:200` is roughly equivalent to the default. Larger values produce a bigger brand element, smaller values produce a compact one.

### {{brandImage}}

Renders just the brand image as an `<img>` tag. Image modifiers from `brandImage` in `settings/meta.md` are applied automatically.

```markdown
{{brandImage}}
```

Both variables work in any page, including blog posts, docs, and gated content.

## Settings reference

| Setting | File | Default | Description |
|---|---|---|---|
| `brandImage` | `meta.md` | `/theme/images/logo.svg` | Logo path with optional image modifiers |
| `brandDisplay` | `header.md` | `text` | Header display mode |
| `brandDisplay` | `footer.md` | — | Footer display mode (shown in copyright row when set) |
| `brandName` | `meta.md` | same as `title` | Default brand name |
| `brandName` | `header.md` | — | Header-specific override |
| `brandName` | `footer.md` | — | Footer-specific override |

## Related

- [Site Identity](/docs/site-identity) — brand name, description, URL, and favicon
- [Header](/docs/header) — navigation, buttons, and header-specific settings
- [Footer](/docs/footer) — navigation groups, social links, and copyright
- [Images](/docs/images) — full image modifier reference