Add custom favicon with terminal and flowchart design

jonwiggins · claude · jonwiggins · commit 4c3cc7889858 · 2026-01-04T19:00:54.000-07:00
SVG favicon featuring a terminal bracket and connected flow nodes, matching the app's blue accent color scheme (#58a6ff). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <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>Claude Code Algorithm Visualizer</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1f6feb"/>
+      <stop offset="100%" style="stop-color:#58a6ff"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background rounded square -->
+  <rect x="2" y="2" width="28" height="28" rx="6" fill="#0d1117"/>
+  <rect x="2" y="2" width="28" height="28" rx="6" fill="url(#bg)" opacity="0.15"/>
+
+  <!-- Terminal bracket -->
+  <path d="M8 10 L12 16 L8 22" stroke="#58a6ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+
+  <!-- Flow nodes -->
+  <circle cx="19" cy="10" r="3" fill="#58a6ff"/>
+  <circle cx="19" cy="22" r="3" fill="#58a6ff"/>
+
+  <!-- Connecting line -->
+  <line x1="19" y1="13" x2="19" y2="19" stroke="#58a6ff" stroke-width="2" stroke-linecap="round"/>
+
+  <!-- Arrow head -->
+  <path d="M16.5 17 L19 20 L21.5 17" stroke="#58a6ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
