2026-08-20 09:01:28 -05:00
3 changed files with 41 additions and 0 deletions
@@ -4,6 +4,15 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Redefined Designs</title>
+<!-- The SVG carries its own light/dark rule; Chrome ignores media queries in a
+     favicon and keeps the light rendering, which still reads because the pale
+     letters carry the mark against a dark tab strip. -->
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<!-- Colours the browser UI around the page on Android and in installed PWAs,
+     matching the accent in src/main.tsx so the chrome does not fight the app. -->
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#141414" />
 </head>
 <body>
 <div id="root"></div>
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Redefined Designs">
+  <!--
+    RD monogram. The letters are knocked out of a filled tile rather than drawn
+    on their own: at 16px the tile is what makes the icon findable in a strip of
+    tabs, where bare strokes turn to grey fuzz.
+
+    Colours are the brand accent from src/main.tsx, and they invert with the
+    theme for the same reason it does. Chrome ignores media queries inside a
+    favicon and keeps the light-theme rendering — that is fine here, because the
+    pale letters still carry the mark against a dark tab strip.
+
+    Drawn as strokes on a 64 grid so the weight is one number. Note a stroked
+    arc extends half the stroke width past its centreline; the D's bowl radius
+    is 14 from a stem at x=38, which is what keeps its outer edge inside the box.
+  -->
+  <style>
+    .tile { fill: #1a1a1a; }
+    .mark { fill: none; stroke: #f0f0f0; stroke-width: 6.5; stroke-linecap: butt; stroke-linejoin: miter; }
+    @media (prefers-color-scheme: dark) {
+      .tile { fill: #f0f0f0; }
+      .mark { stroke: #1a1a1a; }
+    }
+  </style>
+  <rect class="tile" x="2" y="2" width="60" height="60" rx="15" />
+  <g class="mark">
+    <path d="M15 18 V46" />
+    <path d="M15 18 H20 A7 7 0 0 1 20 32 H15" />
+    <path d="M20 32 L27 46" />
+    <path d="M37 18 V46" />
+    <path d="M37 18 H38 A14 14 0 0 1 38 46 H37" />
+  </g>
+</svg>