feat: favicon and logo. (#10)

knightedcodemonkey · web-flow · commit e75dc3bb9354 · 2026-03-16T21:58:27.000-05:00
diff --git a/src/favicon.svg b/src/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="8 3 48 58"><path fill="#020617" stroke="#1e293b" stroke-width="2.2" d="m32 4 23 8.8v17.1C55 47 42.4 55.1 32 59 21.6 55.1 9 47 9 29.9V12.8Z"/><circle cx="32" cy="32" r="11.5" fill="#0ea5e9" opacity=".18"/><path fill="none" stroke="#22d3ee" stroke-width="5" d="m25 21-8 11 8 11m14-22 8 11-8 11"/></svg>
diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@knighted/develop</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
@@ -14,8 +15,15 @@ <h1>
             class="brand-link"
             href="https://github.com/knightedcodemonkey/develop"
             target="_blank"
-            rel="noreferrer"
-            >@knighted/develop</a
+            rel="noopener noreferrer"
+            ><img
+              class="brand-logo"
+              src="logo.svg"
+              alt=""
+              aria-hidden="true"
+              width="24"
+              height="24"
+            /><span class="brand-text">@knighted/develop</span></a
           >
         </h1>
         <p>Compiler-as-a-Service (at the edge of your browser).</p>
diff --git a/src/logo.svg b/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 5 46 54"><path fill="#020617" stroke="#1e293b" stroke-width="2" d="m32 6 22 8v16c0 16-12 24-22 28-10-4-22-12-22-28V14Z"/><circle cx="32" cy="32" r="10" fill="#0ea5e9" opacity=".15"/><path fill="none" stroke="#22d3ee" stroke-width="3" d="m26 24-6 8 6 8m12-16 6 8-6 8"/></svg>
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
@@ -17,10 +17,23 @@
 }
 
 .brand-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
   color: inherit;
   text-decoration: none;
 }
 
+.brand-logo {
+  display: block;
+  border-radius: 6px;
+  flex: none;
+}
+
+.brand-text {
+  line-height: 1;
+}
+
 .brand-link:hover {
   text-decoration: underline;
 }
