The side-menu brand mark next to the site title is site.keys.product_logo (and, for
the dark theme, product_logo_dark), served the same way the favicon is — from
ui.supplemental_files:
site:
keys:
product_logo: /_/product-logo.png
product_logo_dark: /_/product-logo-dark.png
ui:
supplemental_files: ./supplemental-uidocouture new seeds both keys with placeholder artwork under
docs/supplemental-ui/product-logo.png / product-logo-dark.png. Replace them with
real logos, same filenames, and rebuild.
Why two files
The brand mark sits on whatever the current theme’s background is — see
UI Bundle's theme section. product_logo_dark is swapped in
automatically under the dark theme; omit it and product_logo is reused unchanged for
both, which only reads well if the artwork already works on both backgrounds (a
monochrome or already-inverted mark, for instance).
Sizing
The brand mark’s slot is a small, roughly-square product mark next to a separately
rendered text title (the site’s title from docs/src/antora.yml) — not a wide
wordmark. A logo that already contains the product name as text usually duplicates
what’s already there next to it.
nav-brand.hbs renders both images at a fixed 40×40 CSS px (width="40"
height="40"), so export at at least 80×80 (2x, for HiDPI screens) — the seeded
placeholder ships as a 256×256 PNG, which is generous headroom rather than a
requirement. A transparent-background PNG or an SVG both work; square canvas, no
padding baked into the file itself (the 40×40 box already gives it breathing room).