diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..2434a93
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..8b6e828
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..4fd177d
Binary files /dev/null and b/favicon.ico differ
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..1acf62c
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,23 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle -->
+  <circle cx="16" cy="16" r="15" fill="url(#gradient)" stroke="#fff" stroke-width="1"/>
+  
+  <!-- Shield shape representing privacy protection -->
+  <path d="M16 4 L12 6 L12 14 Q12 18 16 21 Q20 18 20 14 L20 6 Z" fill="white" opacity="0.9"/>
+  
+  <!-- Lock symbol inside shield -->
+  <rect x="14" y="12" width="4" height="4" rx="0.5" fill="url(#gradient)"/>
+  <path d="M14.5 12 Q14.5 10.5 16 10.5 Q17.5 10.5 17.5 12" fill="none" stroke="url(#gradient)" stroke-width="1"/>
+  
+  <!-- Small tracking dots -->
+  <circle cx="10" cy="26" r="1.5" fill="#4caf50" opacity="0.8"/>
+  <circle cx="22" cy="26" r="1.5" fill="#667eea" opacity="0.8"/>
+  <circle cx="16" cy="28" r="1" fill="#764ba2" opacity="0.6"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 8ef2d8d..21ce628 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🍪 Privacy-First Demo | GDPR Compliant Tracking</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    
+    <!-- Meta Tags -->
+    <meta name="description" content="Experience GDPR-compliant optional tracking. Privacy protected by default with enhanced features available only when you choose to enable them.">
+    <meta name="author" content="olemd">
     <style>
         * {
             box-sizing: border-box;
@@ -324,6 +332,17 @@
                 </div>
 
                 <p><strong>Try it out!</strong> Click the colorful button in the bottom-right corner to see the consent flow in action. 👇</p>
+                
+                <div style="margin-top: 2rem; padding: 1rem; background: #f8f9fa; border-radius: 8px; text-align: center;">
+                    <p style="margin: 0; color: #666; font-size: 14px;">
+                        💡 <strong>Want to use this in your project?</strong><br>
+                        View source code and documentation at 
+                        <a href="https://kode.naiv.no/olemd/gdpr" target="_blank" rel="noopener" 
+                           style="color: #667eea; text-decoration: none; font-weight: 600;">
+                            kode.naiv.no/olemd/gdpr
+                        </a>
+                    </p>
+                </div>
             </div>
         </div>
     </div>