diff --git a/apps/guide/__tests__/GuideLayout_.test.res b/apps/guide/__tests__/GuideLayout_.test.res
index 11e1672c7..a0c975414 100644
--- a/apps/guide/__tests__/GuideLayout_.test.res
+++ b/apps/guide/__tests__/GuideLayout_.test.res
@@ -20,6 +20,11 @@ test("serializes pane sizes as guide CSS variables", async () => {
   expect(style->String.includes("--guide-output-height: 250px"))->toBe(true)
 })
 
+test("uses a browser chrome color for each theme", async () => {
+  expect(GuideLayout.Light->GuideLayout.themeColor)->toBe("#f6f4ef")
+  expect(GuideLayout.Dark->GuideLayout.themeColor)->toBe("#0f172a")
+})
+
 test("stores resized pane dimensions in local storage", async () => {
   GuideLayout.clearPaneSizes()
 
diff --git a/apps/guide/app/GuideLayout.res b/apps/guide/app/GuideLayout.res
index 254d60598..6190a6eef 100644
--- a/apps/guide/app/GuideLayout.res
+++ b/apps/guide/app/GuideLayout.res
@@ -61,6 +61,12 @@ let themeClass = theme =>
   | Dark => "guide-theme-dark"
   }
 
+let themeColor = theme =>
+  switch theme {
+  | Light => "#f6f4ef"
+  | Dark => "#0f172a"
+  }
+
 let toggleTheme = theme =>
   switch theme {
   | Light => Dark
diff --git a/apps/guide/app/GuideLayoutHook.res b/apps/guide/app/GuideLayoutHook.res
index 4ee7df26c..211dad3cc 100644
--- a/apps/guide/app/GuideLayoutHook.res
+++ b/apps/guide/app/GuideLayoutHook.res
@@ -11,6 +11,17 @@ type t = {
   startRowResize: ReactEvent.Mouse.t => unit,
 }
 
+let syncThemeColor = theme =>
+  switch document->WebAPI.Document.querySelector(`meta[name="theme-color"]`) {
+  | Value(element) =>
+    WebAPI.Element.setAttribute(
+      element,
+      ~qualifiedName="content",
+      ~value=theme->GuideLayout.themeColor,
+    )
+  | Null => ()
+  }
+
 let useLayout = (): t => {
   let shellRef: React.ref<Nullable.t<Dom.element>> = React.useRef(Nullable.null)
   let (paneSizes, setPaneSizes) = React.useState(() => GuideLayout.defaultPaneSizes)
@@ -39,6 +50,11 @@ let useLayout = (): t => {
     None
   }, (theme, themeLoaded))
 
+  React.useEffect(() => {
+    theme->syncThemeColor
+    None
+  }, [theme])
+
   React.useEffect(() => {
     if paneSizesLoaded {
       paneSizes->GuideLayout.savePaneSizes
diff --git a/apps/guide/app/root.jsx b/apps/guide/app/root.jsx
index 38d3ccc4c..798528bea 100644
--- a/apps/guide/app/root.jsx
+++ b/apps/guide/app/root.jsx
@@ -13,11 +13,34 @@ function Root$default(props) {
         <link href={mainCss} rel={"stylesheet"} />
         <ReactRouter.Links />
         <ReactRouter.Meta />
+        <meta charSet={"UTF-8"} />
         <meta
           content={"width=device-width, initial-scale=1"}
           name={"viewport"}
         />
-        <meta charSet={"UTF-8"} />
+        <meta content={"ReScript Guide"} name={"application-name"} />
+        <meta
+          content={"An interactive guide to learning ReScript."}
+          name={"description"}
+        />
+        <meta content={"#f6f4ef"} name={"theme-color"} />
+        <link
+          href={"/apple-touch-icon.avif"}
+          rel={"apple-touch-icon"}
+          sizes={"180x180"}
+        />
+        <link
+          href={"/favicon-32x32.avif"}
+          rel={"icon"}
+          sizes={"32x32"}
+          type={"image/avif"}
+        />
+        <link
+          href={"/favicon-16x16.avif"}
+          rel={"icon"}
+          sizes={"16x16"}
+          type={"image/avif"}
+        />
         <title>{"ReScript Guide"}</title>
       </head>
       <body>
diff --git a/apps/guide/app/root.res b/apps/guide/app/root.res
index 6251b792c..d90e70733 100644
--- a/apps/guide/app/root.res
+++ b/apps/guide/app/root.res
@@ -8,8 +8,14 @@ let default = () => {
       <link rel="stylesheet" href={mainCss} />
       <ReactRouter.Links />
       <ReactRouter.Meta />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta charSet="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="application-name" content="ReScript Guide" />
+      <meta name="description" content="An interactive guide to learning ReScript." />
+      <meta name="theme-color" content="#f6f4ef" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.avif" />
+      <link rel="icon" type_="image/avif" sizes="32x32" href="/favicon-32x32.avif" />
+      <link rel="icon" type_="image/avif" sizes="16x16" href="/favicon-16x16.avif" />
       <title> {React.string("ReScript Guide")} </title>
     </head>
     <body>
diff --git a/apps/guide/vite.config.mjs b/apps/guide/vite.config.mjs
index b6e1594e1..fc20d334c 100644
--- a/apps/guide/vite.config.mjs
+++ b/apps/guide/vite.config.mjs
@@ -42,6 +42,8 @@ export default defineConfig(({ mode }) => {
 
   return {
     envDir: "../..",
+    // Reuse the official favicon set without duplicating branding assets.
+    publicDir: "../docs/public/favicon",
     plugins: [
       env({ prefix: "PUBLIC_" }),
       ...(isTest ? [] : [reactRouter()]),