0004: Brand with logo and favicon

Context#

The first thing a company changes on an internal site is the logo, and the first thing a reader looks for among twenty tabs is the favicon. Both are files that live in the content repository, not in the package, and both have to survive a sub-path deployment and the asset hashing of the build.

Decision#

Inkan takes a logo and a favicon path in the config, relative to the config file. The logo replaces the built-in mark next to the site title in the header and in the sidebar; the favicon replaces the built-in one in the tab. Both are processed by the build like any other asset. When they are not set, the package’s own mark (two overprinted cards and a ribbon, in the process inks) is used for both.

How to use it#

Point at your files#

1
export default defineConfig({
2
  title: 'Acme Decisions',
3
  logo: './brand/logo.svg',
4
  favicon: './brand/favicon.png',
5
});

1
inkan.config.ts
2
brand/
3
  logo.svg
4
  favicon.png
5
  theme.css
6
decisions/

The paths are resolved to absolute paths when the config loads and imported by the site as URLs, so the files end up hashed in dist/_astro/ and the page references them with the base path included. A missing file fails the build with the path in the message.

Formats#

Any image the browser can display works for the logo; SVG keeps it crisp at both sizes. For the favicon the type attribute of the <link rel="icon"> is derived from the extension:

A square image, at least 32 × 32 for PNG, is enough; SVG favicons are supported by current browsers and scale on their own.

Size and colour#

The logo is rendered at a fixed height (26 px in the header, 32 px in the sidebar) with alt="", because the site title is printed next to it; the image is decorative for screen readers. Make the artwork fill its box, or it will look small next to the title.

Since both Day and Stage themes exist, pick a logo that reads on light and dark backgrounds, or embed a prefers-color-scheme media query in the SVG the way the default mark does:

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
2
  <style>
3
    .k { fill: #0A0D17; }
4
    @media (prefers-color-scheme: dark) { .k { fill: #F1F4FA; } }
5
  </style>
6
  <rect class="k" x="4" y="4" width="32" height="32" rx="4" />
7
</svg>

Changing the title next to the logo#

The text next to the logo is the title option. To show only the logo, or a wordmark with no text, override the Header and Sidebar components; see Override components and fill slots. The header also shows a pill with the repository provider when repo.url is set.

Open Graph image#

There is no option for a social preview image in this release; pages set og:title, og:description and og:url but no og:image. Use the head option to add one site-wide tag if you need it:

1
export default defineConfig({
2
  head: [{ tag: 'meta', attrs: { property: 'og:image', content: 'https://decisions.acme.dev/brand/og.png' } }],
3
});

Consequences#

• Two files and two lines of config brand the site; nothing else changes.
• The logo cannot be sized or positioned from the config; the component override is the escape hatch.
• One favicon for all sizes and themes. There is no generated set of icons for home screens or Windows tiles.
• The default mark uses the process inks, so it matches a retinted site only as long as the inks stay close to the defaults.
• Files referenced from the config must be inside the repository, because the build resolves them relative to the config file.