add favicon

ryan-williams · ryan-williams · commit f99c0f54348c · 2026-01-01T18:01:22.000-05:00
diff --git a/site/index.html b/site/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>demo</title>
+    <title>use-kbd</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/site/public/favicon.svg b/site/public/favicon.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 27">
+  <defs>
+    <!-- Radial gradient for sparkle glow -->
+    <radialGradient id="sparkle" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#fff"/>
+      <stop offset="40%" stop-color="#fffacd"/>
+      <stop offset="100%" stop-color="#ffd700"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Keycap - flush with viewport edges -->
+  <path d="M0 23 L0 5 Q0 0 4 0 L26 0 Q30 0 30 5 L30 23 Q30 27 26 27 L4 27 Q0 27 0 23 Z" fill="#2d2d44"/>
+  <rect x="1" y="0" width="28" height="22" rx="4" fill="#4a4a6a"/>
+  <rect x="2" y="1" width="26" height="2" rx="1" fill="#6a6a8a" opacity="0.5"/>
+  <text x="15" y="16" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="700" fill="#fff" text-anchor="middle">K</text>
+
+  <!-- Large sparkles with gradient fill -->
+  <!-- Top-right sparkle -->
+  <path d="M23 1 L25 6 L29 7 L25 8 L23 13 L21 8 L17 7 L21 6 Z" fill="url(#sparkle)"/>
+  <!-- Left sparkle (moved down) -->
+  <path d="M6 6 L7.5 10 L11 11 L7.5 12 L6 16 L4.5 12 L1 11 L4.5 10 Z" fill="url(#sparkle)" opacity="0.85"/>
+  <!-- Bottom sparkle (under K, right of center) -->
+  <path d="M19 16 L20 19 L23 20 L20 21 L19 24 L18 21 L15 20 L18 19 Z" fill="url(#sparkle)" opacity="0.75"/>
+</svg>
diff --git a/site/public/vite.svg b/site/public/vite.svg
