diff --git a/_assets/img/logogram.svg b/_assets/img/logogram.svg
index 0fe52cc77..5a8588e61 100644
--- a/_assets/img/logogram.svg
+++ b/_assets/img/logogram.svg
@@ -9,8 +9,34 @@
 *****************************************************************************-->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <title>The OpenINF Logo</title>
-  <circle cx="50" cy="50" r="45" fill="#FFF" stroke="#000" stroke-width="10" />
+  <style>
+    /* The ink and the parchment, so a tab shows the mark in the colors the
+      site is drawn in rather than in black and white. */
+    .disc {
+      fill: #e7e7d6;
+      stroke: #1d1916;
+    }
+
+    .mark {
+      fill: #1d1916;
+    }
+
+    /* Reading the browser's own theme, not the page's: a mark sits in the
+      chrome, and the chrome is what it has to be legible against. */
+    @media (prefers-color-scheme: dark) {
+      .disc {
+        fill: #1d1916;
+        stroke: #e7e7d6;
+      }
+
+      .mark {
+        fill: #e7e7d6;
+      }
+    }
+  </style>
+  <circle class="disc" cx="50" cy="50" r="45" stroke-width="10" />
   <path
+    class="mark"
     d="M56.55 20c-3.87 0-7.49 3-7.49 6.98 0 4 3.62 7.08 7.49 7A7.26 7.26 0 0 0 64.03 27c0-3.96-3.6-7-7.48-7zm-6.36 20.33c-4.59 0-10.49.71-13.92 4.06-6.19 6 3.1 12.4 7.91 15.09-2.08 7.5-6.14 19.75 5.84 20.5 4.48.12 10.55-.6 13.76-4.12 5.78-6.4-2.24-12.34-7.42-15.15 2.16-7.62 6.07-20.09-6.17-20.38zm-8.47 5.14c1.45-.1 3.04.34 3.85 1.03l.02.02c2.06 1.72.42 6.48-.09 8.49-1.76-1.08-7.24-4.6-6.76-7.42.24-1.4 1.54-2.02 2.98-2.11zm13.39 19.67c2.8 1.61 4.96 3.37 5.61 5.38.93 3-3.08 5.13-5.35 3.5-2.49-1.87-.94-6.55-.26-8.88z"
   />
 </svg>
diff --git a/_includes/head.liquid b/_includes/head.liquid
index 04558622c..37c718bff 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -5,14 +5,7 @@
     from anyone who needs it.
   {%- endcomment -%}
   <meta name='viewport' content='width=device-width,initial-scale=1'>
-  <link
-    type='image/svg+xml'
-    rel='shortcut icon preload'
-    as='image'
-    href='/assets/img/logogram.svg'
-    integrity='sha512-oCOiQlcNbSk49EgFYP+3Hr94accDzoufgSJ4EHPnqMF5FthjzWh0ZWN2zWHSBwH+gsUn4B0IFdmex9Jq9usqmg=='
-    crossorigin='anonymous'
-  >
+  <link rel='icon' type='image/svg+xml' href='/assets/img/logogram.svg'>
   <meta
     name='description'
     content='{{ description | default: siteDescription }}'
diff --git a/eleventy.config.mjs b/eleventy.config.mjs
index 3422ec946..aab887652 100644
--- a/eleventy.config.mjs
+++ b/eleventy.config.mjs
@@ -180,10 +180,26 @@ export default async function (eleventyConfig) {
   // shortest name free in each is the same name, so two marks that arrived
   // with different ids would leave with one between them and `url(#…)` in
   // the second would reach into the first.
+  // `inlineStyles` folds a stylesheet into the attributes it applies to and
+  // drops what is left, which for a mark answering to `prefers-color-scheme`
+  // means keeping one theme and losing the other.
+  const svgo = {
+    multipass: true,
+    plugins: [
+      {
+        name: 'preset-default',
+        params: { overrides: { inlineStyles: false } },
+      },
+    ],
+  };
+
   const inline = {
     multipass: true,
     plugins: [
-      { name: 'preset-default', params: { overrides: { cleanupIds: false } } },
+      {
+        name: 'preset-default',
+        params: { overrides: { cleanupIds: false, inlineStyles: false } },
+      },
     ],
   };
 
@@ -197,7 +213,7 @@ export default async function (eleventyConfig) {
    * @param {object} [config] What to pass the optimizer.
    * @returns {string} The optimized markup.
    */
-  const shrinkSvg = (svg, config = { multipass: true }) => {
+  const shrinkSvg = (svg, config = svgo) => {
     const optimized = optimizeSvg(svg, config).data;
 
     if (hasViewBox(svg) && !hasViewBox(optimized)) {