diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..828a7ec
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..16ab1a9
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,96 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <!-- Background Gradient -->
+    <radialGradient id="bgGlow" cx="50%" cy="30%" r="75%">
+      <stop offset="0%" stop-color="#141a29" />
+      <stop offset="60%" stop-color="#080b12" />
+      <stop offset="100%" stop-color="#030408" />
+    </radialGradient>
+
+    <!-- Border Gradient -->
+    <linearGradient id="borderGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.9" />
+      <stop offset="48%" stop-color="#8a2be2" stop-opacity="0.6" />
+      <stop offset="100%" stop-color="#ff007f" stop-opacity="0.9" />
+    </linearGradient>
+
+    <!-- Visualizer Spectrum Gradient -->
+    <linearGradient id="waveGrad" x1="0%" y1="50%" x2="100%" y2="50%">
+      <stop offset="0%" stop-color="#00f0ff" />
+      <stop offset="28%" stop-color="#00c8ff" />
+      <stop offset="50%" stop-color="#c800ff" />
+      <stop offset="72%" stop-color="#ff0088" />
+      <stop offset="100%" stop-color="#ff0055" />
+    </linearGradient>
+
+    <!-- Center Apex Gradient -->
+    <linearGradient id="centerGrad" x1="50%" y1="0%" x2="50%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="18%" stop-color="#00f0ff" />
+      <stop offset="50%" stop-color="#bf00ff" />
+      <stop offset="82%" stop-color="#ff007f" />
+      <stop offset="100%" stop-color="#ffffff" />
+    </linearGradient>
+
+    <!-- Neon Glow Filter -->
+    <filter id="neonGlow" x="-25%" y="-25%" width="150%" height="150%">
+      <feGaussianBlur stdDeviation="10" result="blur1" />
+      <feGaussianBlur stdDeviation="24" result="blur2" />
+      <feMerge>
+        <feMergeNode in="blur2" />
+        <feMergeNode in="blur1" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+
+    <!-- Soft Core Shadow -->
+    <filter id="dropShadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="10" stdDeviation="14" flood-color="#000000" flood-opacity="0.7" />
+    </filter>
+  </defs>
+
+  <!-- Base Rounded Squircle Container -->
+  <rect x="24" y="24" width="464" height="464" rx="108" fill="url(#bgGlow)" stroke="url(#borderGrad)" stroke-width="12" filter="url(#dropShadow)" />
+
+  <!-- Ambient Internal Atmospheric Glows -->
+  <circle cx="160" cy="180" r="110" fill="#00f0ff" opacity="0.15" filter="url(#neonGlow)" />
+  <circle cx="352" cy="332" r="120" fill="#ff007f" opacity="0.15" filter="url(#neonGlow)" />
+
+  <!-- Visualizer Baseline Center Guide Glow -->
+  <line x1="72" y1="256" x2="440" y2="256" stroke="url(#waveGrad)" stroke-width="3" stroke-dasharray="6 8" opacity="0.25" />
+
+  <!-- Visualizer Core Spectrum Bars -->
+  <g filter="url(#neonGlow)">
+    <!-- Bar 1 (Far Left) -->
+    <rect x="82" y="214" width="36" height="84" rx="18" fill="url(#waveGrad)" opacity="0.9" />
+    
+    <!-- Bar 2 (Mid Left) -->
+    <rect x="134" y="162" width="36" height="188" rx="18" fill="url(#waveGrad)" opacity="0.95" />
+    
+    <!-- Bar 3 (Inner Left) -->
+    <rect x="186" y="112" width="36" height="288" rx="18" fill="url(#waveGrad)" />
+    
+    <!-- Bar 4 (Center Apex - Highest & Dominant) -->
+    <rect x="238" y="68" width="36" height="376" rx="18" fill="url(#centerGrad)" />
+    
+    <!-- Bar 5 (Inner Right) -->
+    <rect x="290" y="112" width="36" height="288" rx="18" fill="url(#waveGrad)" />
+    
+    <!-- Bar 6 (Mid Right) -->
+    <rect x="342" y="162" width="36" height="188" rx="18" fill="url(#waveGrad)" opacity="0.95" />
+    
+    <!-- Bar 7 (Far Right) -->
+    <rect x="394" y="214" width="36" height="84" rx="18" fill="url(#waveGrad)" opacity="0.9" />
+  </g>
+
+  <!-- Crisp Core Accent Beads for Extreme Sharpness at Small Sizes -->
+  <g fill="#ffffff">
+    <circle cx="100" cy="232" r="6" opacity="0.95" />
+    <circle cx="152" cy="180" r="6" opacity="0.95" />
+    <circle cx="204" cy="130" r="6.5" opacity="0.98" />
+    <circle cx="256" cy="86" r="8" opacity="1" />
+    <circle cx="308" cy="130" r="6.5" opacity="0.98" />
+    <circle cx="360" cy="180" r="6" opacity="0.95" />
+    <circle cx="412" cy="232" r="6" opacity="0.95" />
+  </g>
+</svg>
diff --git a/public/index.html b/public/index.html
index a56dd45..e17d7e1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;800&family=Orbitron:wght@600;800;900&family=Outfit:wght@400;600;700;800&family=Russo+One&family=Syncopate:wght@700&display=swap" rel="stylesheet">
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="alternate icon" href="favicon.ico">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>