GUIDE.md

Favicons and social cards

Favicon

The favicon uses the outlined K from the wordmark in white on an Uno-blue rounded tile. The full four-solid composition and grid are omitted so the mark remains legible at tab sizes.

The touch icon has a full blue square background so the platform can apply its mask. The browser favicon retains transparent rounded corners.

Copy the files to the site's public root and include:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<meta name="theme-color" content="#0067ed">

Open Graph card

KIT Open Graph example

The example is 1200 by 630 pixels. It uses a solid Uno-blue background, white solids, blue construction edges, and the outlined white KIT wordmark. A 72 pixel layout inset keeps the composition away from the canvas edges. The layout omits the border and grid to keep the card clear at preview sizes.

The rendered PNG is committed as a ready-to-use example. The source under og/ uses @officialunofficial/og for the layout and response rendering. Both images are embedded as SVG data URIs. Outlined lettering avoids a font request and preserves the custom wordmark.

Run the example

python3 docs/brand/generate-web-assets.py
cd docs/brand/og
bun install --frozen-lockfile
bun run test
bun run build
bun run dev

In another terminal, from the repository root:

curl --fail http://localhost:8791/og.png -o docs/brand/og/example.png

The generator needs Python 3 and rsvg-convert. It derives favicon and white OG artwork from the existing brand SVGs. The development server runs locally. The build checks packaging without deploying anything. The example serves only GET and HEAD requests to /og.png, returning PNG content and a one-hour public cache header. Unknown paths return 404; other methods return 405.

The exported PNG can be served as a static file without running the example server in production. Use a versioned URL when replacing a static card because social platforms cache previews. Keep the downloaded PNG visually aligned with the current card source.

Page metadata

After hosting the image, use its absolute HTTPS URL. The paths below assume the site publishes this PNG at /brand/og-kit-v1.png. Adapt the canonical page URL, title, description, and image path for the actual page.

<meta property="og:type" content="website">
<meta property="og:site_name" content="KIT">
<meta property="og:title" content="KIT — Signed version control">
<meta property="og:description" content="Content-addressed version control with signed commits and attestations.">
<meta property="og:url" content="https://kit.storage/">
<meta property="og:image" content="https://kit.storage/brand/og-kit-v1.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="White geometric solids beside the KIT wordmark on an Uno-blue background.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="KIT — Signed version control">
<meta name="twitter:description" content="Content-addressed version control with signed commits and attestations.">
<meta name="twitter:image" content="https://kit.storage/brand/og-kit-v1.png">
<meta name="twitter:image:alt" content="White geometric solids beside the KIT wordmark on an Uno-blue background.">

Serve the page metadata in the initial HTML. The image URL must return the PNG directly without authentication. Check the published page and card with social preview inspectors after integrating them. These assets do not install a favicon, change site metadata, or publish an endpoint by themselves.

References

• Open Graph protocol defines image and page metadata.
• Package API documents the layout primitives, data URIs, and rendering response.
• Wrangler configuration describes local configuration and asset module rules.