diff --git a/frontend/index.html b/frontend/index.html
index 0692acb..4c819ff 100644
--- a/frontend/index.html
+++ b/frontend/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>TimeTracker</title>
   </head>
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..3ea957c
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="48 48 416 416" width="100%" height="100%">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#818CF8" />
+      <stop offset="100%" stop-color="#4F46E5" />
+    </linearGradient>
+  </defs>
+
+  <!-- App Icon Background -->
+  <rect x="48" y="48" width="416" height="416" rx="96" fill="url(#bg)" />
+
+  <!-- Inner Icon Group -->
+  <g stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Stopwatch Top Button -->
+    <path d="M256 96 v44" stroke-width="28" />
+    <path d="M224 88 h64" stroke-width="24" />
+
+    <!-- Stopwatch Side Button -->
+    <path d="M352 176 l 24 -24" stroke-width="24" />
+    <!-- Cap for side button -->
+    <path d="M362 138 l 28 28" stroke-width="24" />
+
+    <!-- Outer Ring -->
+    <circle cx="256" cy="272" r="132" stroke-width="28" />
+
+    <!-- Clock Hands -->
+    <!-- Minute Hand -->
+    <path d="M256 184 v 88" stroke-width="24" />
+    <!-- Hour Hand -->
+    <path d="M256 272 l 48 32" stroke-width="24" />
+
+    <!-- Dial Tick Marks -->
+    <g stroke-width="12" opacity="0.6">
+      <line x1="256" y1="172" x2="256" y2="188" />
+      <line x1="256" y1="356" x2="256" y2="372" />
+      <line x1="172" y1="272" x2="188" y2="272" />
+      <line x1="340" y1="272" x2="324" y2="272" />
+    </g>
+  </g>
+</svg>
diff --git a/frontend/public/icon.svg b/frontend/public/icon.svg
new file mode 100644
index 0000000..2a4bf1b
--- /dev/null
+++ b/frontend/public/icon.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#818CF8" />
+      <stop offset="100%" stop-color="#4F46E5" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="#4F46E5" flood-opacity="0.4" />
+    </filter>
+  </defs>
+
+  <!-- App Icon Background -->
+  <rect x="48" y="48" width="416" height="416" rx="96" fill="url(#bg)" filter="url(#shadow)" />
+
+  <!-- Inner Icon Group -->
+  <g stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Stopwatch Top Button -->
+    <path d="M256 96 v44" stroke-width="28" />
+    <path d="M224 88 h64" stroke-width="24" />
+    
+    <!-- Stopwatch Side Button -->
+    <path d="M352 176 l 24 -24" stroke-width="24" />
+    <!-- Cap for side button -->
+    <path d="M362 138 l 28 28" stroke-width="24" />
+
+    <!-- Outer Ring -->
+    <circle cx="256" cy="272" r="132" stroke-width="28" />
+    
+    <!-- Clock Hands -->
+    <!-- Minute Hand -->
+    <path d="M256 184 v 88" stroke-width="24" />
+    <!-- Hour Hand -->
+    <path d="M256 272 l 48 32" stroke-width="24" />
+
+    <!-- Dial Tick Marks -->
+    <g stroke-width="12" opacity="0.6">
+      <line x1="256" y1="172" x2="256" y2="188" />
+      <line x1="256" y1="356" x2="256" y2="372" />
+      <line x1="172" y1="272" x2="188" y2="272" />
+      <line x1="340" y1="272" x2="324" y2="272" />
+    </g>
+  </g>
+</svg>
