diff --git a/.gitignore b/.gitignore
index 236e6b1..317506e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 *.png
+!website/public/icon.png
 .playwright-mcp/
diff --git a/website/index.html b/website/index.html
index f0f9db7..afba4a7 100644
--- a/website/index.html
+++ b/website/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!-- Primary Meta Tags -->
diff --git a/website/public/favicon.svg b/website/public/favicon.svg
deleted file mode 100644
index 05ae4b5..0000000
--- a/website/public/favicon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <circle cx="16" cy="16" r="14" fill="#2563eb" />
-  <text x="16" y="22" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="white" text-anchor="middle">SA</text>
-</svg>
diff --git a/website/public/icon.png b/website/public/icon.png
new file mode 100644
index 0000000..bbf72d7
Binary files /dev/null and b/website/public/icon.png differ
diff --git a/website/src/components/header.js b/website/src/components/header.js
index 92aef9f..ef36804 100644
--- a/website/src/components/header.js
+++ b/website/src/components/header.js
@@ -9,7 +9,10 @@ export function renderHeader() {
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-6">
             <h1 class="text-xl font-bold text-[var(--color-text)]">
-              <a href="#/" class="no-underline text-inherit hover:text-[var(--color-primary)] transition-colors" data-i18n="app.title">Semantic Anchors</a>
+              <a href="#/" class="no-underline text-inherit hover:text-[var(--color-primary)] transition-colors flex items-center gap-2" data-i18n="app.title">
+                <img src="${import.meta.env.BASE_URL}icon.png" alt="" class="h-8 w-8" aria-hidden="true" />
+                Semantic Anchors
+              </a>
             </h1>
             <div class="hidden sm:flex items-center gap-4 text-sm">
               <a href="#/" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/" data-i18n="nav.catalog">${i18n.t('nav.catalog')}</a>
