diff --git a/public/images/favicon.svg b/public/images/favicon.svg
new file mode 100644
index 0000000..8349c3a
--- /dev/null
+++ b/public/images/favicon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="PHPDocker.io">
+  <defs>
+    <linearGradient id="fav-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0ea5e9"/>
+      <stop offset="100%" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Gradient rounded square -->
+  <rect x="1" y="1" width="30" height="30" rx="7" fill="url(#fav-grad)"/>
+
+  <!-- </> code brackets scaled to 32px -->
+  <path d="M9,11 L5,16 L9,21" fill="none" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="14" y1="9" x2="17" y2="23" stroke="white" stroke-width="1.75" stroke-linecap="round"/>
+  <path d="M22,11 L26,16 L22,21" fill="none" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..13763ed
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 60" width="280" height="60" role="img" aria-labelledby="logo-title">
+  <title id="logo-title">PHPDocker.io</title>
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Syne:wght@800&amp;display=swap');
+    </style>
+    <linearGradient id="logo-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0ea5e9"/>
+      <stop offset="100%" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Gradient rounded square icon -->
+  <rect x="0" y="2" width="56" height="56" rx="14" fill="url(#logo-grad)"/>
+
+  <!-- </> code brackets -->
+  <path d="M17,22 L9,30 L17,38" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="26" y1="19" x2="30" y2="41" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M39,22 L47,30 L39,38" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Wordmark -->
+  <text x="70" y="40" font-family="Syne,'Arial Black',system-ui,sans-serif" font-weight="800" font-size="26" fill="white">PHPDocker<tspan fill="#38bdf8">.io</tspan></text>
+</svg>
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index 285ba7f..e1edd90 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -15,6 +15,7 @@
 
     {% include 'analytics.html.twig' %}
 
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg"/>
     <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="/css/app.css"/>
     <link rel="stylesheet" href="/vendor/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"/>
@@ -24,8 +25,8 @@
 
 <header class="bg-[#080d19] border-b border-[#1c3050] py-4">
     <div class="px-4 max-w-screen-xl mx-auto">
-        <a href="{{ path('home') }}" class="no-underline">
-            <h1 class="text-3xl font-extrabold text-white tracking-tight" style="font-family:'Syne',sans-serif">PHPDocker.io</h1>
+        <a href="{{ path('home') }}" class="no-underline inline-block">
+            <img src="/images/logo.svg" alt="PHPDocker.io" class="h-10 w-auto"/>
         </a>
         <p class="text-[#94a3b8] text-sm mt-0.5">A PHP development environment generator built with Docker containers.</p>
     </div>