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:

# 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 for full details on logo and favicon setup.

Display modes

Four modes control what the brand element shows:

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:

# settings/header.md
brandDisplay: image-text

The header brand always links to /. See Header for navigation and other header settings.

Footer brand

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

# 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:

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

Image modifiers on brand images

Brand images support the same image modifiers as content images. Append modifiers to the brandImage value in settings/meta.md:

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

All modifiers work:

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

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

sitemd.cc

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

{{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:

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

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

{{brandImage}}

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

Settings reference

Related

• Site Identity — brand name, description, URL, and favicon
• Header — navigation, buttons, and header-specific settings
• Footer — navigation groups, social links, and copyright
• Images — full image modifier reference