diff --git a/frontend/src/App.css b/frontend/src/App.css
index 3097cfb..d3b7286 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -975,6 +975,22 @@ a.app-footer__repo:hover {
 .app-header__brand {
   text-decoration: none;
   color: inherit;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.app-header__logo {
+  display: inline-flex;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.app-header__logo svg {
+  width: 100%;
+  height: 100%;
 }
 
 .app-nav {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0c44003..3097a97 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -62,6 +62,12 @@ export default function App() {
       <a href="#main-content" className="skip-link">Skip to content</a>
       <header className="app-header" ref={headerRef}>
         <Link to="/" className="app-header__brand">
+          <span className="app-header__logo" aria-hidden="true">
+            <svg viewBox="0 0 32 32" width="24" height="24" fill="none">
+              <path d="M22 10.5a6.5 6.5 0 0 0-6.5-6.5C11.36 4 8 7.36 8 11.5c0 4.14 3.36 7.5 7.5 7.5" stroke="#22d3ee" strokeWidth="3" strokeLinecap="round"/>
+              <circle cx="22" cy="22" r="3" fill="#22d3ee" opacity="0.5"/>
+            </svg>
+          </span>
           <span>Chrysopedia</span>
         </Link>
         {showNavSearch && (