diff --git a/package.json b/package.json
index 7f3fbe0..beb089d 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "site:build": "node site/build-site.mjs",
     "site:dev": "npm run site:build && node scripts/site-local-server.mjs",
     "site:serve": "node scripts/site-local-server.mjs",
-    "test:site": "node tests/system-map.test.mjs && node tests/site.test.mjs && node tests/site-brand-assets.test.mjs && node tests/site-local-server.test.mjs && node tests/site-header-browser.test.mjs && node tests/site-first-use-browser.test.mjs && node tests/patterns-browser.test.mjs",
+    "test:site": "node tests/system-map.test.mjs && node tests/site.test.mjs && node tests/site-brand-assets.test.mjs && node tests/site-favicon-browser.test.mjs && node tests/site-local-server.test.mjs && node tests/site-header-browser.test.mjs && node tests/site-first-use-browser.test.mjs && node tests/patterns-browser.test.mjs",
     "test:components:inventory": "node tests/components/component-reference-inventory.test.mjs",
     "test:components:contracts": "node tests/components/component-contract-registry.test.mjs",
     "test:components:unit": "node tests/components/component-state-model.test.mjs && node tests/components/component-specimen-runtime.test.mjs && node tests/components/native-components.test.mjs && node tests/components/interactive-components.test.mjs",
diff --git a/scripts/build-site-brand-assets.py b/scripts/build-site-brand-assets.py
index ab794d8..658174f 100644
--- a/scripts/build-site-brand-assets.py
+++ b/scripts/build-site-brand-assets.py
@@ -59,11 +59,11 @@ def mark(parts, foreground, height, identifier='', monochrome=False):
     return f'<g{identifier_attribute} transform="translate({x:g} {y:g}) scale({scale:g})">{polygons}</g>'
 
 
-def icon_svg(theme='light', height=None, radius=None, optical=False, responsive=False, monochrome=False):
+def icon_svg(theme='light', height=None, radius=None, optical=False, responsive=False, monochrome=False, transparent=False):
     height = height if height is not None else ICONS['visible_mark_height']
     radius = radius if radius is not None else ICONS['browser_radius']
     background, foreground = (CONFIG['ivory'], CONFIG['ink']) if theme == 'light' else (CONFIG['ink'], CONFIG['ivory'])
-    body = '' if monochrome else f'<rect width="64" height="64" rx="{radius:g}" fill="{background}"/>'
+    body = '' if monochrome or transparent else f'<rect width="64" height="64" rx="{radius:g}" fill="{background}"/>'
     if responsive:
         body += f'<style>#optical{{display:none}}@media(max-width:{ICONS["optical_max_size"]}px){{#canonical{{display:none}}#optical{{display:inline}}}}</style>'
         body += mark(GEOMETRY['canonical'], foreground, height, 'canonical') + mark(GEOMETRY['optical_16'], foreground, height, 'optical')
@@ -92,14 +92,17 @@ def icon_svg(theme='light', height=None, radius=None, optical=False, responsive=
 with tempfile.TemporaryDirectory(prefix='judgmentkit-web-icons-') as temporary:
     temporary = Path(temporary)
     for theme in ['light', 'dark']:
-        write(f'{ICONS["output_directory"]}/favicon-{theme}.svg', icon_svg(theme, responsive=True))
+        write(f'{ICONS["output_directory"]}/favicon-{theme}.svg', icon_svg(theme, responsive=True, transparent=ICONS['browser_background'] == 'transparent'))
         for size in [16, 32, 48]:
             source = temporary / f'{theme}-{size}.svg'
-            source.write_text(icon_svg(theme, optical=size == 16))
+            source.write_text(icon_svg(theme, optical=size == 16, transparent=ICONS['browser_background'] == 'transparent'))
             render(source, icons_dir / f'favicon-{theme}-{size}.png', (size, size))
-    frames = [Image.open(icons_dir / f'favicon-{ICONS["fallback_theme"]}-{size}.png').convert('RGBA') for size in [16, 32, 48]]
+        frames = [Image.open(icons_dir / f'favicon-{theme}-{size}.png').convert('RGBA') for size in [16, 32, 48]]
+        ico = icons_dir / f'favicon-{theme}.ico'
+        frames[-1].save(ico, format='ICO', sizes=[(16, 16), (32, 32), (48, 48)], append_images=frames[:-1])
+        OUTPUTS.append(ico)
     ico = icons_dir / 'favicon.ico'
-    frames[-1].save(ico, format='ICO', sizes=[(16, 16), (32, 32), (48, 48)], append_images=frames[:-1])
+    ico.write_bytes((icons_dir / f'favicon-{ICONS["fallback_theme"]}.ico').read_bytes())
     OUTPUTS.append(ico)
     write(f'{ICONS["output_directory"]}/safari-pinned-tab.svg', icon_svg(monochrome=True))
     for name, height in [('app-icon', ICONS['visible_mark_height']), ('maskable', ICONS['maskable_visible_mark_height'])]:
@@ -115,7 +118,7 @@ def icon_svg(theme='light', height=None, radius=None, optical=False, responsive=
     'generator': 'scripts/build-site-brand-assets.py',
     'canonical_lockup': SOCIAL['lockup_source'],
     'canonical_lockup_sha256': digest(lockup_path),
-    'sources': {p: digest(ROOT / p) for p in [ICONS['geometry_source'], ICONS['master_source'], 'site/brand-assets.json']},
+    'sources': {p: digest(ROOT / p) for p in [ICONS['geometry_source'], ICONS['master_source'], 'site/brand-assets.json', 'site/assets/brand/favicon-theme.js']},
     'canvas': [1200, 630],
     'social_placement': {'scale': scale, 'translation': [x, y], 'source_viewBox': [0, 0, social_width, social_height]},
     'web_icons': ICONS,
diff --git a/scripts/verify-public-release.mjs b/scripts/verify-public-release.mjs
index c0c366b..30dea62 100644
--- a/scripts/verify-public-release.mjs
+++ b/scripts/verify-public-release.mjs
@@ -1180,7 +1180,7 @@ async function verifyPublicRoutes(baseUrl, options = {}) {
       "See a screen repaired",
       "Explore examples",
       '<link rel="canonical" href="https://judgmentkit.ai/">',
-      `<link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.svg"]}"`,
+      `<script src="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-theme.js"]}" data-brand-favicon-controller`,
       '<meta property="og:site_name" content="JudgmentKit">',
     ],
     "homepage",
@@ -1227,6 +1227,18 @@ async function verifyPublicRoutes(baseUrl, options = {}) {
   const docs = await fetchText(baseUrl, "/docs/");
   assert.equal(getAnalyticsScriptSrc(docs.text, "docs"), analyticsScriptSrc);
   assertReleaseFooter(docs.text, expectedPackageVersion, "docs");
+  for (const [label, html] of [["home", home.text], ["value", value.text], ["docs", docs.text]]) {
+    const head = html.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i)?.[1];
+    assert.ok(head, `${label}: document head`);
+    const controllers = [...head.matchAll(/<script\b[^>]*\bdata-brand-favicon-controller[^>]*>/gi)];
+    assert.equal(controllers.length, 1, `${label}: one synchronous favicon controller`);
+    assert.equal(/\s(?:async|defer|type)(?:\s|=|>)/i.test(controllers[0][0]), false, `${label}: classic parser-blocking script`);
+    const active = head.replace(/<!--[\s\S]*?-->|<noscript\b[^>]*>[\s\S]*?<\/noscript>|<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "");
+    assert.equal(/<link\b[^>]*\brel=["'](?:shortcut )?icon["']/i.test(active), false, `${label}: no competing static favicon`);
+    for (const fragment of [`src="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-theme.js"]}"`, `data-light-icon="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]}"`, `data-dark-icon="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-dark.ico"]}"`]) assert.ok(controllers[0][0].includes(fragment), `${label}: current controller and themed ICO URLs`);
+    assert.ok(head.includes(`<noscript data-brand-favicon-fallback><link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]}" type="image/x-icon" sizes="16x16 32x32 48x48"></noscript>`), `${label}: light no-script fallback`);
+  }
+
   assertIncludes(
     docs.text,
     [
@@ -1342,7 +1354,9 @@ async function verifyPublicRoutes(baseUrl, options = {}) {
   }
   assert.deepEqual(webManifest.icons.map(icon => [icon.sizes, icon.purpose]), [["192x192", "any"], ["512x512", "any"], ["192x192", "maskable"], ["512x512", "maskable"]]);
   for (const fragment of [
-    `rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/favicon.ico"]}"`,
+    `data-light-icon="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]}"`,
+    `data-dark-icon="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-dark.ico"]}"`,
+    `<noscript data-brand-favicon-fallback><link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]}"`,
     `rel="apple-touch-icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/apple-touch-icon.png"]}"`,
     `rel="mask-icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/safari-pinned-tab.svg"]}"`,
     `rel="manifest" href="${SITE_BRAND_ICON_BUNDLE.manifestRoute}"`,
diff --git a/site/assets/brand-generation.json b/site/assets/brand-generation.json
index a07d478..d3d4f7b 100644
--- a/site/assets/brand-generation.json
+++ b/site/assets/brand-generation.json
@@ -5,7 +5,8 @@
   "sources": {
     "brand/slab-j/geometry.json": "26e03b985e09c029e627fdf7a4bb347906dea0fc8cea8ba437e7333a782003d0",
     "brand/slab-j/judgmentkit.svg": "bd33c93b9493a8e2e19a3f78d8ff30c34a5a53bfb48b524a5e9a9acd1d9443dd",
-    "site/brand-assets.json": "c5fd87e74129effce4a330d035d88b808f2335f2839fcf6d41785eea6ffaa336"
+    "site/brand-assets.json": "a67e11455014cc22a452799900aafe52a5ba015e4b8b5d9c63e558e9063b0f55",
+    "site/assets/brand/favicon-theme.js": "438e2c44cada8c2a0ae77ff4000d87f5d943b00afda39a786850f5fe3871140e"
   },
   "canvas": [
     1200,
@@ -28,7 +29,7 @@
     "geometry_source": "brand/slab-j/geometry.json",
     "master_source": "brand/slab-j/judgmentkit.svg",
     "canvas": 64,
-    "browser_radius": 8,
+    "browser_radius": 0,
     "visible_mark_height": 48,
     "center": [
       32,
@@ -39,7 +40,8 @@
     "maskable_safe_radius": 25.6,
     "fallback_theme": "dark",
     "output_directory": "site/assets/brand",
-    "raster_density": 384
+    "raster_density": 384,
+    "browser_background": "transparent"
   },
   "maskable_placement": {
     "visible_mark_height": 36,
@@ -54,15 +56,17 @@
   "outputs": {
     "site/assets/judgmentkit-social-thumbnail.svg": "767c41ede48bb426ca3c8df288618c1fb0a79ddc40415130fac603f5ad241dbb",
     "site/assets/judgmentkit-social-thumbnail.png": "c67b13e33c69cbc6782363b7b349176b5680e3aa39ec6724c36b6fb5e9783f08",
-    "site/assets/brand/favicon-light.svg": "1c4c2a6022d2e50c341e9522620470f79174898632eda9fe01c32f3f352325ae",
-    "site/assets/brand/favicon-light-16.png": "359b1e88b0201d55d64d0360b730f5dc6c0317960173ac12ba4f75c7b8402e84",
-    "site/assets/brand/favicon-light-32.png": "a552d29c0c088f003ed9fe542a4d6e7fa62d3c02252e3c87fbe0c0afd6896710",
-    "site/assets/brand/favicon-light-48.png": "0c1c18c67187439a32845d5e3ff80a2aed85a134077961c9ea6ab8a85ba65baf",
-    "site/assets/brand/favicon-dark.svg": "53f9a529ec4752bbd30dfccc866b664d81ce659cc53487501362e32bc5f17808",
-    "site/assets/brand/favicon-dark-16.png": "e917ba316d3a368ea4dc6d13998acb25411f61b8b4a45562d1621935afaf1ada",
-    "site/assets/brand/favicon-dark-32.png": "7baa4434d5370411737a564a7c759679c501bd6548e0bddca445f5685b9e462d",
-    "site/assets/brand/favicon-dark-48.png": "79217a48024d4e5da5a5a284fa397c6fe8fb4a40e794a4120c5fadd119c440b4",
-    "site/assets/brand/favicon.ico": "26ef197cc6939ba27079c5e7abde5221f59b5a81cf9f2a4fce270a70a52f9169",
+    "site/assets/brand/favicon-light.svg": "df03d49d63c285d414ec74d5c6e230365a8466c6580c4178445db1401c392c2b",
+    "site/assets/brand/favicon-light-16.png": "479534679f88fa1d40bd223e2320f2a952a621340ed6ad46269b2f38cd81e6ea",
+    "site/assets/brand/favicon-light-32.png": "7a7ae3a8e6f45c07b85b3c56275ec7e47bef3b340468143778783617aa66922a",
+    "site/assets/brand/favicon-light-48.png": "366bae7d8abaed9d3b2da2e7842ba52a16c1c050d79a189a8fa0cafcef15e6a6",
+    "site/assets/brand/favicon-light.ico": "4612b20cadd4c0f3c2a2320ece628544dc1b38900a743f5345b690a9ee6af27f",
+    "site/assets/brand/favicon-dark.svg": "90267474375f5953b5cad24698e06f8e1a4a1e68b7993260e70ae32639cb4852",
+    "site/assets/brand/favicon-dark-16.png": "f895ed537c628d25feeb14daa962510611588fae0a0e6552010fd32dd1150634",
+    "site/assets/brand/favicon-dark-32.png": "309bb4263e5bb781d06020a209dbeb6a36bec6a79ca2d206fa42d9c39490f51c",
+    "site/assets/brand/favicon-dark-48.png": "1a136fe5053cbaeb03fa7572a9365e1631ebe1180eb4fb081fe26fe08cdf0ccd",
+    "site/assets/brand/favicon-dark.ico": "d6e5567d5beee7e7e1b789fd560b9c3725eaa18fafd47c53d20f199da5776824",
+    "site/assets/brand/favicon.ico": "d6e5567d5beee7e7e1b789fd560b9c3725eaa18fafd47c53d20f199da5776824",
     "site/assets/brand/safari-pinned-tab.svg": "87e3cec474f28a2bc320d72c7baf2f577c60d7e5e2becbcb39730d20bf56fa82",
     "site/assets/brand/app-icon.svg": "be2f013ffc8129208a1ce3e98b843662ea931c9421bb0ac99d7e9c94333689ba",
     "site/assets/brand/apple-touch-icon.png": "6a0750bb93a2e2d9a6d69d19193dfaa8de42e99916bba77a697c821c5825b628",
diff --git a/site/assets/brand/favicon-dark-16.png b/site/assets/brand/favicon-dark-16.png
index 1d0efb9..10f741b 100644
Binary files a/site/assets/brand/favicon-dark-16.png and b/site/assets/brand/favicon-dark-16.png differ
diff --git a/site/assets/brand/favicon-dark-32.png b/site/assets/brand/favicon-dark-32.png
index 3941ea0..51dd1ba 100644
Binary files a/site/assets/brand/favicon-dark-32.png and b/site/assets/brand/favicon-dark-32.png differ
diff --git a/site/assets/brand/favicon-dark-48.png b/site/assets/brand/favicon-dark-48.png
index 300af8f..88f4596 100644
Binary files a/site/assets/brand/favicon-dark-48.png and b/site/assets/brand/favicon-dark-48.png differ
diff --git a/site/assets/brand/favicon-dark.ico b/site/assets/brand/favicon-dark.ico
new file mode 100644
index 0000000..40807d8
Binary files /dev/null and b/site/assets/brand/favicon-dark.ico differ
diff --git a/site/assets/brand/favicon-dark.svg b/site/assets/brand/favicon-dark.svg
index d06f8c8..7c953ab 100644
--- a/site/assets/brand/favicon-dark.svg
+++ b/site/assets/brand/favicon-dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64 64" role="img" data-visible-mark-height="48"><title>JudgmentKit Slab J</title><rect width="64" height="64" rx="8" fill="#0B0D0E"/><style>#optical{display:none}@media(max-width:20px){#canonical{display:none}#optical{display:inline}}</style><g id="canonical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="14,12 50,2 50,12 14,22" fill="#F7F6F2"/><polygon points="38,21 50,18 50,40 38,44" fill="#F7F6F2"/><polygon points="14,42 24,42 24,52 50,44 50,54 24,62 14,58" fill="#8B9096"/></g><g id="optical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="12,12 52,2 52,12 12,22" fill="#F7F6F2"/><polygon points="40,20 52,17 52,38 40,41" fill="#F7F6F2"/><polygon points="12,40 24,40 24,50 52,42 52,54 24,62 12,57" fill="#8B9096"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64 64" role="img" data-visible-mark-height="48"><title>JudgmentKit Slab J</title><style>#optical{display:none}@media(max-width:20px){#canonical{display:none}#optical{display:inline}}</style><g id="canonical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="14,12 50,2 50,12 14,22" fill="#F7F6F2"/><polygon points="38,21 50,18 50,40 38,44" fill="#F7F6F2"/><polygon points="14,42 24,42 24,52 50,44 50,54 24,62 14,58" fill="#8B9096"/></g><g id="optical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="12,12 52,2 52,12 12,22" fill="#F7F6F2"/><polygon points="40,20 52,17 52,38 40,41" fill="#F7F6F2"/><polygon points="12,40 24,40 24,50 52,42 52,54 24,62 12,57" fill="#8B9096"/></g></svg>
diff --git a/site/assets/brand/favicon-light-16.png b/site/assets/brand/favicon-light-16.png
index f5a8f30..a230459 100644
Binary files a/site/assets/brand/favicon-light-16.png and b/site/assets/brand/favicon-light-16.png differ
diff --git a/site/assets/brand/favicon-light-32.png b/site/assets/brand/favicon-light-32.png
index 14b7ded..91c0b4e 100644
Binary files a/site/assets/brand/favicon-light-32.png and b/site/assets/brand/favicon-light-32.png differ
diff --git a/site/assets/brand/favicon-light-48.png b/site/assets/brand/favicon-light-48.png
index a1115a1..52e94f2 100644
Binary files a/site/assets/brand/favicon-light-48.png and b/site/assets/brand/favicon-light-48.png differ
diff --git a/site/assets/brand/favicon-light.ico b/site/assets/brand/favicon-light.ico
new file mode 100644
index 0000000..1e70a70
Binary files /dev/null and b/site/assets/brand/favicon-light.ico differ
diff --git a/site/assets/brand/favicon-light.svg b/site/assets/brand/favicon-light.svg
index f825bb3..c0afe80 100644
--- a/site/assets/brand/favicon-light.svg
+++ b/site/assets/brand/favicon-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64 64" role="img" data-visible-mark-height="48"><title>JudgmentKit Slab J</title><rect width="64" height="64" rx="8" fill="#F7F6F2"/><style>#optical{display:none}@media(max-width:20px){#canonical{display:none}#optical{display:inline}}</style><g id="canonical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="14,12 50,2 50,12 14,22" fill="#0B0D0E"/><polygon points="38,21 50,18 50,40 38,44" fill="#0B0D0E"/><polygon points="14,42 24,42 24,52 50,44 50,54 24,62 14,58" fill="#8B9096"/></g><g id="optical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="12,12 52,2 52,12 12,22" fill="#0B0D0E"/><polygon points="40,20 52,17 52,38 40,41" fill="#0B0D0E"/><polygon points="12,40 24,40 24,50 52,42 52,54 24,62 12,57" fill="#8B9096"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64 64" role="img" data-visible-mark-height="48"><title>JudgmentKit Slab J</title><style>#optical{display:none}@media(max-width:20px){#canonical{display:none}#optical{display:inline}}</style><g id="canonical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="14,12 50,2 50,12 14,22" fill="#0B0D0E"/><polygon points="38,21 50,18 50,40 38,44" fill="#0B0D0E"/><polygon points="14,42 24,42 24,52 50,44 50,54 24,62 14,58" fill="#8B9096"/></g><g id="optical" transform="translate(6.4 6.4) scale(0.8)"><polygon points="12,12 52,2 52,12 12,22" fill="#0B0D0E"/><polygon points="40,20 52,17 52,38 40,41" fill="#0B0D0E"/><polygon points="12,40 24,40 24,50 52,42 52,54 24,62 12,57" fill="#8B9096"/></g></svg>
diff --git a/site/assets/brand/favicon-theme.js b/site/assets/brand/favicon-theme.js
new file mode 100644
index 0000000..e70b079
--- /dev/null
+++ b/site/assets/brand/favicon-theme.js
@@ -0,0 +1,15 @@
+(() => {
+  const script = document.currentScript;
+  const appearance = window.matchMedia("(prefers-color-scheme: dark)");
+  const icon = document.createElement("link");
+  icon.rel = "icon";
+  icon.type = "image/x-icon";
+  icon.sizes = "16x16 32x32 48x48";
+  icon.dataset.brandFavicon = "";
+  const update = () => {
+    icon.href = appearance.matches ? script.dataset.darkIcon : script.dataset.lightIcon;
+  };
+  update();
+  document.head.append(icon);
+  appearance.addEventListener("change", update);
+})();
diff --git a/site/assets/brand/favicon.ico b/site/assets/brand/favicon.ico
index f684cb9..40807d8 100644
Binary files a/site/assets/brand/favicon.ico and b/site/assets/brand/favicon.ico differ
diff --git a/site/brand-assets.json b/site/brand-assets.json
index b4dbdd2..e84625e 100644
--- a/site/brand-assets.json
+++ b/site/brand-assets.json
@@ -109,6 +109,21 @@
     {
       "source": "site/assets/judgmentkit-social-thumbnail.svg",
       "route": "/assets/judgmentkit-social-thumbnail.svg"
+    },
+    {
+      "source": "site/assets/brand/favicon-light.ico",
+      "route": "/assets/brand/favicon-light.ico",
+      "content_versioned": true
+    },
+    {
+      "source": "site/assets/brand/favicon-dark.ico",
+      "route": "/assets/brand/favicon-dark.ico",
+      "content_versioned": true
+    },
+    {
+      "source": "site/assets/brand/favicon-theme.js",
+      "route": "/assets/brand/favicon-theme.js",
+      "content_versioned": true
     }
   ],
   "head_exceptions": [
@@ -141,7 +156,7 @@
     "geometry_source": "brand/slab-j/geometry.json",
     "master_source": "brand/slab-j/judgmentkit.svg",
     "canvas": 64,
-    "browser_radius": 8,
+    "browser_radius": 0,
     "visible_mark_height": 48,
     "center": [
       32,
@@ -152,7 +167,8 @@
     "maskable_safe_radius": 25.6,
     "fallback_theme": "dark",
     "output_directory": "site/assets/brand",
-    "raster_density": 384
+    "raster_density": 384,
+    "browser_background": "transparent"
   },
   "legacy_icon_aliases": [
     {
@@ -254,6 +270,62 @@
     {
       "route": "/assets/brand/site-86b6a01d9795231a.webmanifest",
       "target": "/site.webmanifest"
+    },
+    {
+      "route": "/assets/brand/favicon-light-cfee0c66322f931c.svg",
+      "target": "/assets/brand/favicon-light.svg"
+    },
+    {
+      "route": "/assets/brand/favicon-light-16-cfee0c66322f931c.png",
+      "target": "/assets/brand/favicon-light-16.png"
+    },
+    {
+      "route": "/assets/brand/favicon-light-32-cfee0c66322f931c.png",
+      "target": "/assets/brand/favicon-light-32.png"
+    },
+    {
+      "route": "/assets/brand/favicon-dark-cfee0c66322f931c.svg",
+      "target": "/assets/brand/favicon-dark.svg"
+    },
+    {
+      "route": "/assets/brand/favicon-dark-16-cfee0c66322f931c.png",
+      "target": "/assets/brand/favicon-dark-16.png"
+    },
+    {
+      "route": "/assets/brand/favicon-dark-32-cfee0c66322f931c.png",
+      "target": "/assets/brand/favicon-dark-32.png"
+    },
+    {
+      "route": "/assets/brand/favicon-cfee0c66322f931c.ico",
+      "target": "/favicon.ico"
+    },
+    {
+      "route": "/assets/brand/safari-pinned-tab-cfee0c66322f931c.svg",
+      "target": "/safari-pinned-tab.svg"
+    },
+    {
+      "route": "/assets/brand/apple-touch-icon-cfee0c66322f931c.png",
+      "target": "/apple-touch-icon.png"
+    },
+    {
+      "route": "/assets/brand/app-icon-192-cfee0c66322f931c.png",
+      "target": "/assets/brand/app-icon-192.png"
+    },
+    {
+      "route": "/assets/brand/app-icon-512-cfee0c66322f931c.png",
+      "target": "/assets/brand/app-icon-512.png"
+    },
+    {
+      "route": "/assets/brand/maskable-192-cfee0c66322f931c.png",
+      "target": "/assets/brand/maskable-192.png"
+    },
+    {
+      "route": "/assets/brand/maskable-512-cfee0c66322f931c.png",
+      "target": "/assets/brand/maskable-512.png"
+    },
+    {
+      "route": "/assets/brand/site-cfee0c66322f931c.webmanifest",
+      "target": "/site.webmanifest"
     }
   ]
 }
diff --git a/site/brand-assets.mjs b/site/brand-assets.mjs
index 3809304..3c2bc13 100644
--- a/site/brand-assets.mjs
+++ b/site/brand-assets.mjs
@@ -57,12 +57,8 @@ export function siteBrandHead({ title, description, canonicalUrl, existingContex
   ].filter(([, key]) => !existingContext.includes(key))
     .map(([attribute, key, value]) => `<meta ${attribute}="${key}" content="${value}">`).join("\n    ");
   const social = SITE_BRAND.origin + SITE_BRAND.social.route;
-  return `<link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/favicon.ico"]}" sizes="16x16 32x32 48x48">
-    ${["light", "dark"].map(theme => {
-      const media = `(prefers-color-scheme: ${theme})`;
-      return [...[16, 32].map(size => `<link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes[`/assets/brand/favicon-${theme}-${size}.png`]}" type="image/png" sizes="${size}x${size}" media="${media}">`),
-        `<link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes[`/assets/brand/favicon-${theme}.svg`]}" type="image/svg+xml" sizes="any" media="${media}">`].join("\n    ");
-    }).join("\n    ")}
+  return `<script src="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-theme.js"]}" data-brand-favicon-controller data-light-icon="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]}" data-dark-icon="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-dark.ico"]}"></script>
+    <noscript data-brand-favicon-fallback><link rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]}" type="image/x-icon" sizes="16x16 32x32 48x48"></noscript>
     <link rel="apple-touch-icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/apple-touch-icon.png"]}" sizes="180x180">
     <link rel="mask-icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/safari-pinned-tab.svg"]}" color="${SITE_BRAND.ink}">
     <link rel="manifest" href="${SITE_BRAND_ICON_BUNDLE.manifestRoute}">
@@ -118,7 +114,8 @@ export function applySiteBrandHead(html, relativePath) {
     const route = "/" + relativePath.replace(/index\.html$/, "");
     const canonicalUrl = canonicalTag ? attribute(canonicalTag, "href") : SITE_BRAND.origin + route;
     const existingContext = [...active.matchAll(/<meta\b[^>]*>/gi)].map(([tag]) => (attribute(tag, "name") || attribute(tag, "property")).toLowerCase());
-    const head = original.replace(/<!--[\s\S]*?-->|<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>|<(?:link|meta)\b[^>]*>/gi, tag => {
+    const head = original.replace(/<noscript\b[^>]*\bdata-brand-favicon-fallback[^>]*>[\s\S]*?<\/noscript\s*>/gi, "").replace(/<!--[\s\S]*?-->|<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>|<(?:link|meta)\b[^>]*>/gi, tag => {
+      if (/^<script\b/i.test(tag) && /\bdata-brand-favicon-controller(?:\s|=|>)/i.test(tag)) return "";
       if (/^<!--|^<(?:script|style)\b/i.test(tag)) return tag;
       const rel = attribute(tag, "rel").toLowerCase();
       const meta = (attribute(tag, "name") || attribute(tag, "property")).toLowerCase();
diff --git a/specs/site-brand-assets.md b/specs/site-brand-assets.md
index 03afd6e..326af67 100644
--- a/specs/site-brand-assets.md
+++ b/specs/site-brand-assets.md
@@ -2,9 +2,11 @@
 
 Browser tabs, saved shortcuts, installed apps and shared links use the approved Slab J and outlined Inter 780 wordmark. `site/brand-assets.json` records the website contract; `scripts/build-site-brand-assets.py` produces its deterministic exports. Canonical lockups, mark polygons, native icon masters, header/footer markup, navigation and page copy remain unchanged.
 
-Browser icons use a 64 × 64 tile with an 8-unit corner radius. The visible mark is 48 units high and its actual ink bounds center on (32,32). Light uses Ivory `#F7F6F2` behind Ink `#0B0D0E`; dark reverses those colors. The return stays Nickel `#8B9096`. A single external uniform transform places the supplied polygons. The approved optical derivative remains available at 16px with a 12px visible height; the canonical polygons govern 32px and larger views.
+Browser icons use a transparent 64 × 64 canvas, with no plate or corner radius. The visible mark is 48 units high and its actual ink bounds center on (32,32). Light uses Ink `#0B0D0E` primary polygons; dark uses Ivory `#F7F6F2`. The return stays Nickel `#8B9096`. A single external uniform transform places the supplied polygons. The approved optical derivative remains available at 16px with a 12px visible height; the canonical polygons govern 32px and larger views. Each theme has a 16px/32px/48px ICO whose decoded frames exactly match its transparent PNG exports.
 
-Every published HTML head advertises explicit light and dark SVG, 16px PNG and 32px PNG links with `prefers-color-scheme` media queries. PNG alternatives provide a supported raster path for Safari. The ICO has dark 16px, 32px and 48px frames. Legacy `/favicon.svg`, `/favicon.ico` and PNG aliases return current dark artwork. Browsers that select an unqualified fallback receive the Ink plate with Ivory primary polygons and Nickel return in either scheme. Explicit light artwork remains available for browsers that honor the media queries. Safari pinned tabs use the canonical single-color silhouette without a plate because the platform supplies its tint.
+Every managed HTML head runs the shared `site/assets/brand/favicon-theme.js` controller as a synchronous external classic script. The controller selects the light or dark ICO using `matchMedia` before appending exactly one typed `rel="icon"` link. It updates that same link when the scheme changes. No other static SVG, PNG or ICO favicon links compete. A `<noscript>` link supplies the light ICO only when scripting is disabled. The controller, its two themed ICO paths and the other identity assets use the content-derived bundle key; controller bytes participate in that key. The SVG and PNG assets remain served for compatibility and explicit rendering checks.
+
+Legacy `/favicon.svg`, `/favicon.ico` and PNG aliases return current transparent dark artwork. Safari pinned tabs use the canonical single-color silhouette without a plate because the platform supplies its tint. Native Safari fixture checks established readable transparent Ink/Nickel in light appearance and transparent Ivory/Nickel in dark appearance. An existing Safari origin can retain its previously processed favicon; current source, a new URL or a successful image probe does not establish the state of that cache. Scheme-change DOM updates likewise do not alone prove native toolbar refresh.
 
 Apple touch and regular PWA icons use the same 48-unit placement on an opaque square Ink plate with Ivory primary polygons and Nickel return. Platform masks provide rounding. Maskable icons use the same dark treatment at a documented 36-unit visible-height alternate, centered on (32,32), to keep every vertex inside the central 80%-diameter safe circle. This changes only placement and colors, preserving all canonical polygon coordinates. The manifest background is Ink; `id`, `start_url` and `scope` remain `/`; no service worker is introduced.
 
@@ -12,8 +14,8 @@ Sharing art is an opaque 1200 × 630 Ink canvas containing the complete reversed
 
 `site/brand-assets.mjs` copies exports byte for byte and applies the managed identity entries to shared pages and copied reports, examples and experiments. It preserves every body byte, page title, description, canonical URL and existing social context such as article type, locale, video metadata and creator. The sole exception remains `/assets/releases/visual-composition-runtime-demo.html`, an immutable noindex recording source with a data-only image CSP and empty `data:,` favicon.
 
-Icon, touch, pinned-tab and manifest filenames include a shared SHA256-derived key. The key covers all advertised icon source bytes and the complete logical manifest. New bytes produce new URLs while compatibility aliases and installed-app identity remain stable. Current HTTP bytes and a fresh browser do not establish the state of an existing Safari favicon/history cache.
+Icon, touch, pinned-tab and manifest filenames include a shared SHA256-derived key. The key covers all content-versioned icon and controller source bytes and the complete logical manifest. New bytes produce new URLs while compatibility aliases and installed-app identity remain stable. Current HTTP bytes and a fresh browser do not establish the state of an existing Safari favicon/history cache.
 
-`legacy_icon_aliases` retains the 25 published icon, touch, app and manifest URLs from bundles `2cbf1750a49bf439` and `86b6a01d9795231a`. Each explicit route serves its current equivalent asset; older manifests serve the current manifest with stable `/` app identity. These compatibility routes do not enter the new bundle hash or page heads. Add only recorded published paths, without a catch-all rule for arbitrary hashes. Keeping a remembered URL available permits revalidation; it does not prove that Safari has refreshed its cached icon or removed browser-drawn framing.
+`legacy_icon_aliases` retains the 39 published icon, touch, app and manifest URLs from bundles `2cbf1750a49bf439`, `86b6a01d9795231a` and `cfee0c66322f931c`. Each explicit route serves its current equivalent asset; older manifests serve the current manifest with stable `/` app identity. These compatibility routes do not enter the new bundle hash or page heads. Add only recorded published paths, without a catch-all rule for arbitrary hashes. Keeping a remembered URL available permits revalidation; it does not prove that Safari has refreshed its cached icon or removed browser-drawn framing.
 
-Regenerate with `python3 scripts/build-site-brand-assets.py`, using ImageMagick and Pillow. Icon rasterization uses `magick -background none -density 384 input.svg -resize target! -strip -colorspace sRGB PNG32:output.png`, with `PNG24` for opaque platform icons. Social art retains density 192. No installed font is required. Normal Node builds copy committed exports without those rendering tools. Run `node tests/site.test.mjs` and `node tests/site-brand-assets.test.mjs`, then inspect actual 16px/32px browser renders in both schemes, Apple/PWA/maskable placements and the complete sharing PNG. WebKit proofs must check the active PNG metadata and served bytes; native favicon requests and explicit image/canvas probes are separate evidence.
+Regenerate with `python3 scripts/build-site-brand-assets.py`, using ImageMagick and Pillow. Icon rasterization uses `magick -background none -density 384 input.svg -resize target! -strip -colorspace sRGB PNG32:output.png`, with `PNG24` for opaque platform icons. Social art retains density 192. No installed font is required. Normal Node builds copy committed exports without those rendering tools. Run `node tests/site.test.mjs` and `node tests/site-brand-assets.test.mjs`, then inspect actual 16px/32px browser renders in both schemes, Apple/PWA/maskable placements and the complete sharing PNG. Run `node tests/site-favicon-browser.test.mjs` for real Chromium initial selection, theme updates, no-script fallback and one-icon cardinality. Native Safari checks remain separate from headless browser coverage. Explicit image/canvas probes do not prove native favicon selection.
diff --git a/tests/site-brand-assets.test.mjs b/tests/site-brand-assets.test.mjs
index ee6c9dc..d5082b6 100644
--- a/tests/site-brand-assets.test.mjs
+++ b/tests/site-brand-assets.test.mjs
@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import crypto from "node:crypto";
 import fs from "node:fs";
 import os from "node:os";
+import vm from "node:vm";
 import path from "node:path";
 import { inflateSync } from "node:zlib";
 import { buildSite } from "../site/build-site.mjs";
@@ -60,11 +61,13 @@ try {
       .map(file => historicalAlias(file, "2cbf1750a49bf439")),
     ...["favicon-light.svg", "favicon-light-16.png", "favicon-light-32.png", "favicon-dark.svg", "favicon-dark-16.png", "favicon-dark-32.png", "favicon.ico", "safari-pinned-tab.svg", "apple-touch-icon.png", "app-icon-192.png", "app-icon-512.png", "maskable-192.png", "maskable-512.png", "site.webmanifest"]
       .map(file => historicalAlias(file, "86b6a01d9795231a")),
+    ...["favicon-light.svg", "favicon-light-16.png", "favicon-light-32.png", "favicon-dark.svg", "favicon-dark-16.png", "favicon-dark-32.png", "favicon.ico", "safari-pinned-tab.svg", "apple-touch-icon.png", "app-icon-192.png", "app-icon-512.png", "maskable-192.png", "maskable-512.png", "site.webmanifest"]
+      .map(file => historicalAlias(file, "cfee0c66322f931c")),
   ];
-  assert.equal(historicalAliases.length, 25);
-  assert.deepEqual(SITE_BRAND.legacy_icon_aliases, historicalAliases, "retain exactly the 25 recorded URLs and their current equivalents");
-  assert.equal(SITE_BRAND_LEGACY_ICON_COPIES.length, 23);
-  assert.equal(SITE_BRAND_LEGACY_MANIFEST_ROUTES.length, 2);
+  assert.equal(historicalAliases.length, 39);
+  assert.deepEqual(SITE_BRAND.legacy_icon_aliases, historicalAliases, "retain exactly the 39 recorded URLs and their current equivalents");
+  assert.equal(SITE_BRAND_LEGACY_ICON_COPIES.length, 36);
+  assert.equal(SITE_BRAND_LEGACY_MANIFEST_ROUTES.length, 3);
   const htmlFiles = files(outDir).filter(file => file.endsWith(".html"));
   for (const file of htmlFiles) {
     const label = path.relative(outDir, file);
@@ -90,18 +93,24 @@ try {
       assert.equal(matches.length, 1, `${label}: one ${key}`);
       return matches[0].content;
     };
-    for (const [rel, alias] of [["icon", "/favicon.ico"], ...["light", "dark"].flatMap(theme => [["icon", `/assets/brand/favicon-${theme}.svg`], ...[16, 32].map(size => ["icon", `/assets/brand/favicon-${theme}-${size}.png`])]), ["apple-touch-icon", "/apple-touch-icon.png"], ["mask-icon", "/safari-pinned-tab.svg"]]) {
+    const controllers = [...head.matchAll(/<script\b[^>]*\bdata-brand-favicon-controller[^>]*>/gi)].map(([tag]) => attrs(tag));
+    assert.equal(controllers.length, 1, `${label}: exactly one controller before document parsing completes`);
+    const controller = controllers[0];
+    assert.equal(controller.src, SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-theme.js"]);
+    assert.equal(controller["data-light-icon"], SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.ico"]);
+    assert.equal(controller["data-dark-icon"], SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-dark.ico"]);
+    assert.equal(/\s(?:async|defer|type)(?:\s|=|>)/i.test(head.match(/<script\b[^>]*\bdata-brand-favicon-controller[^>]*>/i)[0]), false, `${label}: synchronous classic script`);
+    const fallback = head.match(/<noscript\b[^>]*data-brand-favicon-fallback[^>]*>([\s\S]*?)<\/noscript>/i);
+    assert.ok(fallback, `${label}: readable no-script fallback`);
+    const fallbackLinks = [...fallback[1].matchAll(/<link\b[^>]*>/gi)].map(([tag]) => attrs(tag));
+    assert.deepEqual(fallbackLinks, [{ rel: "icon", href: controller["data-light-icon"], type: "image/x-icon", sizes: "16x16 32x32 48x48" }]);
+    assert.equal([...tags.replace(/<noscript\b[^>]*>[\s\S]*?<\/noscript>/gi, "").matchAll(/<link\b[^>]*>/gi)].map(([tag]) => attrs(tag)).filter(link => link.rel === "icon").length, 0, `${label}: no competing static favicon candidates`);
+    assert.equal(redecorated.match(/data-brand-favicon-controller/g).length, 1, `${label}: repeated head pass cannot duplicate controller`);
+    assert.equal(redecorated.match(/data-brand-favicon-fallback/g).length, 1, `${label}: repeated head pass cannot duplicate fallback`);
+    for (const [rel, alias] of [["apple-touch-icon", "/apple-touch-icon.png"], ["mask-icon", "/safari-pinned-tab.svg"]]) {
       const href = SITE_BRAND_ICON_BUNDLE.routes[alias];
       assert.equal(links.filter(item => item.rel === rel && item.href === href).length, 1, `${label}: one content-versioned ${href}`);
-      assert.equal(links.some(item => item.rel === rel && item.href === alias), false, `${label}: do not advertise cached legacy ${alias}`);
-    }
-    assert.equal(links.filter(item => item.rel === "icon").length, 7, `${label}: ICO plus both themes of SVG/16px/32px PNG`);
-    for (const theme of ["light", "dark"]) {
-      const themed = links.filter(item => item.rel === "icon" && item.href.includes(`favicon-${theme}`));
-      assert.equal(themed.length, 3, `${label}: explicit ${theme} alternatives`);
-      for (const link of themed) assert.equal(link.media, `(prefers-color-scheme: ${theme})`, `${label}: Safari PNG and SVG media`);
     }
-    for (const alias of ["/favicon.svg", "/favicon-16x16.png", "/favicon-32x32.png"]) assert.equal(links.some(item => item.href === alias), false);
     for (const [rel, href] of [["manifest", SITE_BRAND_ICON_BUNDLE.manifestRoute], ["image_src", SITE_BRAND.origin + SITE_BRAND.social.route]]) {
       assert.equal(links.filter(item => item.rel === rel && item.href === href).length, 1, `${label}: one ${href}`);
     }
@@ -146,6 +155,23 @@ try {
   assert.ok(contextual.includes(SITE_BRAND.origin + SITE_BRAND.social.route));
   assert.equal(contextual.match(/<body>[\s\S]*<\/body>/)[0], body);
 
+  const controllerSource = fs.readFileSync("site/assets/brand/favicon-theme.js", "utf8");
+  assert.equal(hash(controllerSource), "438e2c44cada8c2a0ae77ff4000d87f5d943b00afda39a786850f5fe3871140e", "exact approved shared controller bytes");
+  for (const initialDark of [false, true]) {
+    const nodes = [], listeners = [];
+    const appearance = { matches: initialDark, addEventListener: (event, listener) => { assert.equal(event, "change"); listeners.push(listener); } };
+    const dataset = { lightIcon: "light.ico", darkIcon: "dark.ico" };
+    vm.runInNewContext(controllerSource, {
+      window: { matchMedia: query => { assert.equal(query, "(prefers-color-scheme: dark)"); return appearance; } },
+      document: { currentScript: { dataset }, createElement: tag => { assert.equal(tag, "link"); return { dataset: {} }; }, head: { append: icon => { assert.equal(icon.href, initialDark ? "dark.ico" : "light.ico", "choose href before insertion"); nodes.push(icon); } } },
+    });
+    assert.equal(nodes.length, 1); assert.equal(listeners.length, 1);
+    assert.equal(nodes[0].rel, "icon"); assert.equal(nodes[0].type, "image/x-icon"); assert.equal(nodes[0].sizes, "16x16 32x32 48x48");
+    appearance.matches = !initialDark; listeners[0]();
+    assert.equal(nodes.length, 1, "scheme updates reuse the same candidate");
+    assert.equal(nodes[0].href, initialDark ? "light.ico" : "dark.ico");
+  }
+
   const iconSourceRoot = fs.mkdtempSync(path.join(os.tmpdir(), "judgmentkit-icon-source-"));
   try {
     for (const { source } of SITE_BRAND_ICON_BUNDLE.copies) {
@@ -161,6 +187,8 @@ try {
     for (const alias of Object.keys(first.routes)) assert.notEqual(changed.routes[alias], first.routes[alias], alias);
     assert.notEqual(changed.manifestRoute, first.manifestRoute);
     for (const key of ["id", "start_url", "scope"]) assert.equal(changed.manifest[key], "/", "app identity survives cache-key changes");
+    fs.appendFileSync(path.join(iconSourceRoot, "site/assets/brand/favicon-theme.js"), "\n// changed controller fixture\n");
+    assert.notEqual(createSiteBrandIconBundle(iconSourceRoot).key, changed.key, "controller bytes participate in every advertised identity URL");
   } finally { fs.rmSync(iconSourceRoot, { recursive: true, force: true }); }
 
   const receipt = JSON.parse(fs.readFileSync("site/assets/brand-generation.json", "utf8"));
@@ -182,6 +210,8 @@ try {
 
   assert.equal(SITE_BRAND.web_icons.raster_density, 384);
   assert.equal(SITE_BRAND.web_icons.fallback_theme, "dark");
+  assert.equal(SITE_BRAND.web_icons.browser_radius, 0);
+  assert.equal(SITE_BRAND.web_icons.browser_background, "transparent");
   assert.equal(SITE_BRAND.social.raster_density, 192);
   const geometry = JSON.parse(fs.readFileSync("brand/slab-j/geometry.json", "utf8"));
   const close = (actual, expected, message) => assert.ok(Math.abs(actual - expected) < 1e-9, `${message}: ${actual} vs ${expected}`);
@@ -202,8 +232,7 @@ try {
   };
   for (const theme of ["light", "dark"]) {
     const svg = fs.readFileSync(`site/assets/brand/favicon-${theme}.svg`, "utf8");
-    const rect = attrs(svg.match(/<rect\b([^>]+)>/)[1]);
-    assert.equal(rect.rx, "8"); assert.equal(rect.fill, SITE_BRAND[theme === "light" ? "ivory" : "ink"]);
+    assert.equal(svg.includes("<rect"), false, "browser icon has no plate or corner radius");
     assert.match(svg, /@media\(max-width:20px\)/);
     const groups = [...svg.matchAll(/<g\b([^>]*)>([\s\S]*?)<\/g>/g)];
     assert.deepEqual(groups.map(g => attrs(g[1]).id), ["canonical", "optical"]);
@@ -211,7 +240,7 @@ try {
     for (const size of [16, 32]) {
       const png = fs.readFileSync(`site/assets/brand/favicon-${theme}-${size}.png`);
       assert.deepEqual(pngSize(png), [size, size]);
-      assert.equal(png[25], 6, "browser PNG preserves alpha outside rounded corners");
+      assert.equal(png[25], 6, "browser PNG preserves transparent canvas");
     }
   }
   for (const [name, height] of [["app-icon", 48], ["maskable", 36]]) {
@@ -227,21 +256,27 @@ try {
   inspectGroup([...pinned.matchAll(/<g\b([^>]*)>([\s\S]*?)<\/g>/g)][0], geometry.canonical, 48, ["#000000", "#000000", "#000000"]);
   for (const [route, source] of [["favicon.svg", "favicon-dark.svg"], ["favicon-16x16.png", "favicon-dark-16.png"], ["favicon-32x32.png", "favicon-dark-32.png"]]) assert.deepEqual(fs.readFileSync(path.join(outDir, route)), fs.readFileSync(`site/assets/brand/${source}`), "legacy icon fallback is dark");
   assert.deepEqual(pngSize(fs.readFileSync(SITE_BRAND.social.source)), [1200, 630]);
-  const ico = fs.readFileSync(path.join(outDir, "favicon.ico"));
-  assert.equal(ico.readUInt16LE(0), 0); assert.equal(ico.readUInt16LE(2), 1);
-  assert.equal(ico.readUInt16LE(4), 3);
-  assert.deepEqual([0, 1, 2].map(index => [ico[6 + index * 16], ico[7 + index * 16]]), [[16, 16], [32, 32], [48, 48]]);
-  for (const [index, size] of [16, 32, 48].entries()) {
-    const png = fs.readFileSync(`site/assets/brand/favicon-dark-${size}.png`), dark = pngPixels(png);
-    const entry = 6 + index * 16, length = ico.readUInt32LE(entry + 8), offset = ico.readUInt32LE(entry + 12);
-    assert.deepEqual(pngPixels(ico.subarray(offset, offset + length)), dark, `${size}px ICO frame preserves every dark fallback pixel`);
-    let partial = 0;
-    for (let pixel = 0; pixel < dark.length; pixel += 4) if (dark[pixel + 3] > 0 && dark[pixel + 3] < 255) {
-      assert.deepEqual([...dark.subarray(pixel, pixel + 3)], [11, 13, 14], "partial-alpha outer edge has Ink RGB, without a white matte");
-      partial++;
+  for (const theme of ["light", "dark"]) {
+    const ico = fs.readFileSync(`site/assets/brand/favicon-${theme}.ico`);
+    assert.equal(ico.readUInt16LE(0), 0); assert.equal(ico.readUInt16LE(2), 1); assert.equal(ico.readUInt16LE(4), 3);
+    assert.deepEqual([0, 1, 2].map(index => [ico[6 + index * 16], ico[7 + index * 16]]), [[16, 16], [32, 32], [48, 48]]);
+    for (const [index, size] of [16, 32, 48].entries()) {
+      const pixels = pngPixels(fs.readFileSync(`site/assets/brand/favicon-${theme}-${size}.png`));
+      const entry = 6 + index * 16, length = ico.readUInt32LE(entry + 8), offset = ico.readUInt32LE(entry + 12);
+      assert.deepEqual(pngPixels(ico.subarray(offset, offset + length)), pixels, `${theme} ${size}px ICO frame preserves every themed PNG pixel`);
+      const foreground = theme === "light" ? [11, 13, 14] : [247, 246, 242];
+      let primary = 0, nickel = 0, partial = 0;
+      for (let pixel = 0; pixel < pixels.length; pixel += 4) {
+        const x = (pixel / 4) % size, y = Math.floor(pixel / 4 / size), alpha = pixels[pixel + 3];
+        if (x === 0 || y === 0 || x === size - 1 || y === size - 1) assert.equal(alpha, 0, `${theme} ${size}px outer canvas is transparent`);
+        if (alpha === 255 && pixels.subarray(pixel, pixel + 3).equals(Buffer.from(foreground))) primary++;
+        if (alpha === 255 && pixels.subarray(pixel, pixel + 3).equals(Buffer.from([139, 144, 150]))) nickel++;
+        if (alpha > 0 && alpha < 255) partial++;
+      }
+      assert.ok(primary > 0 && nickel > 0 && partial > 0, `${theme} ${size}px canonical primary, Nickel and antialiased mark edges`);
     }
-    assert.ok(partial > 0, "rounded tile has antialiased edges");
   }
+  assert.deepEqual(fs.readFileSync(path.join(outDir, "favicon.ico")), fs.readFileSync("site/assets/brand/favicon-dark.ico"), "root fallback keeps transparent dark ICO");
   for (const name of ["apple-touch-icon", "app-icon-192", "app-icon-512", "maskable-192", "maskable-512"]) {
     const pixels = pngPixels(fs.readFileSync(`site/assets/brand/${name}.png`));
     assert.deepEqual([...pixels.subarray(0, 4)], [11, 13, 14, 255], `${name}: opaque Ink corner`);
@@ -262,7 +297,7 @@ try {
   for (const { source, route } of mounted) {
     const response = await fetch(new URL(route, local.url));
     assert.equal(response.status, 200, route);
-    const expectedType = route.endsWith(".ico") ? "image/x-icon" : route.endsWith(".png") ? "image/png" : "image/svg+xml; charset=utf-8";
+    const expectedType = route.endsWith(".ico") ? "image/x-icon" : route.endsWith(".png") ? "image/png" : route.endsWith(".js") ? "application/javascript; charset=utf-8" : "image/svg+xml; charset=utf-8";
     assert.equal(response.headers.get("content-type"), expectedType, route);
     assert.deepEqual(Buffer.from(await response.arrayBuffer()), fs.readFileSync(source), `${route}: canonical bytes`);
     const head = await fetch(new URL(route, local.url), { method: "HEAD" });
@@ -289,7 +324,7 @@ try {
   for (const route of ["/assets/brand/favicon-ffffffffffffffff.ico", "/assets/brand/site-ffffffffffffffff.webmanifest"]) {
     for (const method of ["GET", "HEAD"]) assert.equal((await fetch(new URL(route, local.url), { method })).status, 404, "unrecorded fingerprint routes remain absent");
   }
-  console.log(`Website brand checks passed: ${htmlFiles.length - SITE_BRAND.head_exceptions.length} branded HTML heads + ${SITE_BRAND.head_exceptions.length} explicit sandboxed source exception, ${mounted.length} exact public asset routes, all 25 historical URLs checked with GET/HEAD, ICO frames, PNG dimensions, manifest purposes, complete canonical lockup, and current social aliases.`);
+  console.log(`Website brand checks passed: ${htmlFiles.length - SITE_BRAND.head_exceptions.length} branded HTML heads + ${SITE_BRAND.head_exceptions.length} explicit sandboxed source exception, ${mounted.length} exact public asset routes, all 39 historical URLs checked with GET/HEAD, ICO frames, PNG dimensions, manifest purposes, complete canonical lockup, and current social aliases.`);
 } finally {
   server?.closeAllConnections?.();
   if (server) await new Promise(resolve => server.close(resolve));
diff --git a/tests/site-favicon-browser.test.mjs b/tests/site-favicon-browser.test.mjs
new file mode 100644
index 0000000..c42269a
--- /dev/null
+++ b/tests/site-favicon-browser.test.mjs
@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { buildSite } from "../site/build-site.mjs";
+import { SITE_BRAND_ICON_BUNDLE } from "../site/brand-assets.mjs";
+import { listenSiteLocalServer } from "../scripts/site-local-server.mjs";
+import { evaluate, openPage, waitForExpression, withChromium } from "./components/support/chromium-harness.mjs";
+
+const outDir = fs.mkdtempSync(path.join(os.tmpdir(), "judgmentkit-favicon-browser-"));
+const results = [], requests = [];
+let server;
+const icons = theme => SITE_BRAND_ICON_BUNDLE.routes[`/assets/brand/favicon-${theme}.ico`];
+const stateExpression = `(() => ({
+  scheme: matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+  links: [...document.querySelectorAll('link[rel="icon"]')].map(link => ({
+    href: new URL(link.href).pathname, type: link.type, sizes: link.sizes.value,
+    managed: link.hasAttribute('data-brand-favicon'),
+  })),
+  firstBody: window.__faviconAtFirstBody,
+}))()`;
+try {
+  await buildSite(outDir);
+  // Fixture-only early body observation proves the external script ran during
+  // parsing, before the document load event, rather than in a later effect.
+  for (const file of ["index.html", "docs/index.html"]) {
+    const target = path.join(outDir, file);
+    const probe = `<script>window.__faviconAtFirstBody=[...document.querySelectorAll('link[rel="icon"]')].map(link=>new URL(link.href).pathname);</script>`;
+    fs.writeFileSync(target, fs.readFileSync(target, "utf8").replace(/<body\b[^>]*>/i, match => match + probe));
+  }
+  const local = await listenSiteLocalServer({ siteDir: outDir, host: "127.0.0.1", port: 0 });
+  server = local.server;
+  server.on("request", request => {
+    if (/favicon.*\.(?:ico|js)(?:\?|$)/.test(request.url)) requests.push({ url: request.url, method: request.method });
+  });
+  await withChromium(async client => {
+    for (const route of ["/", "/docs/"]) for (const initial of ["light", "dark"]) {
+      const page = await openPage(client, { url: new URL(route, local.url).href, colorScheme: initial, viewport: { width: 390, height: 844 } });
+      try {
+        const before = await evaluate(client, page.sessionId, stateExpression);
+        assert.equal(before.scheme, initial);
+        assert.deepEqual(before.firstBody, [icons(initial)], "one correct ICO before body parsing");
+        assert.deepEqual(before.links, [{ href: icons(initial), type: "image/x-icon", sizes: "16x16 32x32 48x48", managed: true }]);
+        await evaluate(client, page.sessionId, "window.__originalFavicon = document.querySelector('link[rel=icon]')");
+        const changed = initial === "light" ? "dark" : "light";
+        await client.send("Emulation.setEmulatedMedia", { media: "screen", features: [{ name: "prefers-color-scheme", value: changed }] }, page.sessionId);
+        await waitForExpression(client, page.sessionId, `document.querySelector('link[rel=icon]')?.getAttribute('href') === ${JSON.stringify(icons(changed))}`, { label: "same ICO link follows scheme change" });
+        const after = await evaluate(client, page.sessionId, stateExpression);
+        assert.equal(after.scheme, changed);
+        assert.deepEqual(after.links, [{ href: icons(changed), type: "image/x-icon", sizes: "16x16 32x32 48x48", managed: true }]);
+        assert.equal(await evaluate(client, page.sessionId, "window.__originalFavicon === document.querySelector('link[rel=icon]')"), true);
+        assert.deepEqual(page.runtimeExceptions, [], "controller introduces no runtime exceptions");
+        results.push({ route, initial, before, after });
+      } finally { await page.close(); }
+    }
+    const page = await openPage(client, { url: local.url, colorScheme: "light", viewport: { width: 390, height: 844 } });
+    try {
+      await client.send("Emulation.setScriptExecutionDisabled", { value: true }, page.sessionId);
+      const loaded = client.waitFor("Page.loadEventFired", page.sessionId);
+      await client.send("Page.navigate", { url: new URL("/docs/", local.url).href }, page.sessionId);
+      await loaded;
+      const fallback = await evaluate(client, page.sessionId, stateExpression);
+      assert.deepEqual(fallback.links, [{ href: icons("light"), type: "image/x-icon", sizes: "16x16 32x32 48x48", managed: false }]);
+      assert.equal(fallback.firstBody, undefined, "page scripts are disabled in this fixture");
+      results.push({ route: "/docs/", javascript: false, fallback });
+    } finally { await page.close(); }
+  });
+  const evidenceDir = process.env.JUDGMENTKIT_FAVICON_QA_DIR;
+  if (evidenceDir) {
+    fs.mkdirSync(evidenceDir, { recursive: true });
+    fs.writeFileSync(path.join(evidenceDir, "browser-regression.json"), JSON.stringify({
+      status: "passed", bundleKey: SITE_BRAND_ICON_BUNDLE.key, cases: results,
+      nativeRequestsObserved: requests.filter(request => request.url.endsWith(".ico")),
+      requestLog: requests,
+      limits: "Chromium DOM, parsing and request evidence. No Safari or native toolbar-pixel claim; no explicit icon image probes ran.",
+    }, null, 2) + "\n");
+  }
+  console.log("Favicon browser checks passed: home/docs light/dark initial parsing, four dynamic scheme changes, one retained typed ICO, and no-script light fallback.");
+} finally {
+  server?.closeAllConnections?.();
+  if (server) await new Promise(resolve => server.close(resolve));
+  fs.rmSync(outDir, { recursive: true, force: true });
+}
diff --git a/tests/site.test.mjs b/tests/site.test.mjs
index 182f82f..aac6822 100644
--- a/tests/site.test.mjs
+++ b/tests/site.test.mjs
@@ -1839,7 +1839,7 @@ assert.equal(homepage.includes("optional styling path"), false);
 assert.equal(homepage.includes("Open system map"), false);
 assert.equal(homepage.includes("not the final renderer"), false);
 assert.ok(homepage.includes('rel="canonical" href="https://judgmentkit.ai/"'));
-assert.ok(homepage.includes(`rel="icon" href="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-light.svg"]}"`));
+assert.ok(homepage.includes(`src="${SITE_BRAND_ICON_BUNDLE.routes["/assets/brand/favicon-theme.js"]}" data-brand-favicon-controller`));
 assert.ok(homepage.includes(`rel="image_src" href="${SITE_BRAND.origin}${SITE_BRAND.social.route}"`));
 assert.ok(homepage.includes(`property="og:image" content="${SITE_BRAND.origin}${SITE_BRAND.social.route}"`));
 assert.ok(homepage.includes(`property="og:image:secure_url" content="${SITE_BRAND.origin}${SITE_BRAND.social.route}"`));