Riebeckite
Menu
Color mode

Branding your site

A theme controls how every Riebeckite site looks — colors, typography, spacing, and layout. The assets that make a site yours — its icon, header logo, and link preview image — live outside the theme. This guide replaces them. To change the look of the site itself, see Change Your Theme.

Site icon

Generated sites ship public/favicon.ico and reference it from app/routes/_renderer.tsx:

tsx
<link rel="icon" href="/favicon.ico" />

To keep this setup, replace public/favicon.ico with an ICO file of the same name. No code change is needed.

To use a PNG or SVG icon instead, put the file under public/ and update the href. Add type when the URL does not make the format obvious:

tsx
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

The starter and showcase presets render a header. app/components/site-header.tsx shows the site title next to a 28×28 logo:

tsx
<img src="/riebeckite-logo.png" alt="" class="site-header__logo" width="28" height="28" />

Replace public/riebeckite-logo.png with your own image. A square PNG with a transparent background fits the layout best. If you rename the file, update src to match.

The empty and minimal presets have no header, so there is no logo to replace.

Link previews (Open Graph images) use site.defaultOgImage as their fallback. Add the field to the site block in riebeckite.config.ts:

ts
site: {
  title: "My Blog",
  baseUrl: "https://example.com",
  defaultOgImage: "/ogp.png",
},

Put the file under public/ (here public/ogp.png) so it is served at /ogp.png. A 1200×630 PNG or JPEG is the common size. Set site.baseUrl to the real public URL so the absolute image URL in generated metadata is correct.

Individual pages can override the fallback. The SEO plugin reads image or ogImage from frontmatter, falling back to site.defaultOgImage.

Title and description

site.title is the site name and site.description is the summary used by SEO and feeds. Set them once when you point the settings at your site. The full site block is documented in Configuration.

Verify

Run the development server and check the browser tab and the header:

sh
npm exec riebeckite dev

Then build and confirm the assets are copied to dist/:

sh
npm exec riebeckite build

History

1 changesCollapseExpand
1 + # Branding your site
2 +
3 + A theme controls how every Riebeckite site looks — colors, typography, spacing, and layout. The assets that make a site yours — its icon, header logo, and link preview image — live outside the theme. This guide replaces them. To change the look of the site itself, see [Change Your Theme](../getting-started/first-theme.en.md).
4 +
5 + ## Site icon
6 +
7 + Generated sites ship `public/favicon.ico` and reference it from `app/routes/_renderer.tsx`:
8 +
9 + ```tsx
10 + <link rel="icon" href="/favicon.ico" />
11 + ```
12 +
13 + To keep this setup, replace `public/favicon.ico` with an ICO file of the same name. No code change is needed.
14 +
15 + To use a PNG or SVG icon instead, put the file under `public/` and update the `href`. Add `type` when the URL does not make the format obvious:
16 +
17 + ```tsx
18 + <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
19 + ```
20 +
21 + ## Header logo
22 +
23 + The `starter` and `showcase` presets render a header. `app/components/site-header.tsx` shows the site title next to a 28×28 logo:
24 +
25 + ```tsx
26 + <img src="/riebeckite-logo.png" alt="" class="site-header__logo" width="28" height="28" />
27 + ```
28 +
29 + Replace `public/riebeckite-logo.png` with your own image. A square PNG with a transparent background fits the layout best. If you rename the file, update `src` to match.
30 +
31 + The `empty` and `minimal` presets have no header, so there is no logo to replace.
32 +
33 + ## Link preview image
34 +
35 + Link previews (Open Graph images) use `site.defaultOgImage` as their fallback. Add the field to the `site` block in `riebeckite.config.ts`:
36 +
37 + ```ts
38 + site: {
39 + title: "My Blog",
40 + baseUrl: "https://example.com",
41 + defaultOgImage: "/ogp.png",
42 + },
43 + ```
44 +
45 + Put the file under `public/` (here `public/ogp.png`) so it is served at `/ogp.png`. A 1200×630 PNG or JPEG is the common size. Set `site.baseUrl` to the real public URL so the absolute image URL in generated metadata is correct.
46 +
47 + Individual pages can override the fallback. The [SEO plugin](../plugins/seo.en.md) reads `image` or `ogImage` from frontmatter, falling back to `site.defaultOgImage`.
48 +
49 + ## Title and description
50 +
51 + `site.title` is the site name and `site.description` is the summary used by SEO and feeds. Set them once when you [point the settings at your site](../getting-started/installation.en.md#point-the-settings-at-your-site). The full `site` block is documented in [Configuration](../reference/configuration.en.md).
52 +
53 + ## Verify
54 +
55 + Run the development server and check the browser tab and the header:
56 +
57 + ```sh
58 + npm exec riebeckite dev
59 + ```
60 +
61 + Then build and confirm the assets are copied to `dist/`:
62 +
63 + ```sh
64 + npm exec riebeckite build
65 + ```
66 +