diff --git a/astro.config.mjs b/astro.config.mjs
index e15c732cb..418f38027 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -39,6 +39,7 @@ export default defineConfig({
             customCss: ["./src/styles/custom.css"],
             components: {
                 ThemeProvider: "./src/shared/ui/ThemeProvider.astro",
+                SiteTitle: "./src/shared/ui/SiteTitle.astro",
             },
             head: [
                 {
diff --git a/src/shared/ui/SiteTitle.astro b/src/shared/ui/SiteTitle.astro
new file mode 100644
index 000000000..92c9cca0d
--- /dev/null
+++ b/src/shared/ui/SiteTitle.astro
@@ -0,0 +1,61 @@
+---
+import { logos } from "virtual:starlight/user-images";
+import config from "virtual:starlight/user-config";
+const { siteTitle } = Astro.locals.starlightRoute;
+// Keep the header logo pointing to the default landing page, regardless of the current locale.
+---
+
+<a href={import.meta.env.BASE_URL} class="site-title sl-flex">
+    {
+        config.logo && logos.dark && (
+            <>
+                <img
+                    class:list={{
+                        "light:sl-hidden print:hidden": !("src" in config.logo),
+                    }}
+                    alt={config.logo.alt}
+                    src={logos.dark.src}
+                    width={logos.dark.width}
+                    height={logos.dark.height}
+                />
+                {!("src" in config.logo) && (
+                    <img
+                        class="dark:sl-hidden print:block"
+                        alt={config.logo.alt}
+                        src={logos.light?.src}
+                        width={logos.light?.width}
+                        height={logos.light?.height}
+                    />
+                )}
+            </>
+        )
+    }
+    <span class:list={{ "sr-only": config.logo?.replacesTitle }} translate="no">
+        {siteTitle}
+    </span>
+</a>
+
+<style>
+    @layer starlight.core {
+        .site-title {
+            align-items: center;
+            gap: var(--sl-nav-gap);
+            font-size: var(--sl-text-h4);
+            font-weight: 600;
+            color: var(--sl-color-text-accent);
+            text-decoration: none;
+            white-space: nowrap;
+            min-width: 0;
+        }
+        span {
+            overflow: hidden;
+        }
+        img {
+            height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+            width: auto;
+            max-width: 100%;
+            object-fit: contain;
+            object-position: 0 50%;
+        }
+    }
+</style>