diff --git a/web/public/apple-touch-icon.png b/web/public/apple-touch-icon.png
new file mode 100644
index 00000000..d5981154
Binary files /dev/null and b/web/public/apple-touch-icon.png differ
diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index 3ab9cfcd..b96fd248 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -18,6 +18,7 @@ import Icon from '../components/Icon.astro';
     <title>{fullTitle}</title>
     <meta name="description" content={description} />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <script is:inline>
       // font, palette and light/dark applied before paint (Naskh, sepia and the system's light/dark by default)
       try {
@@ -36,7 +37,7 @@ import Icon from '../components/Icon.astro';
   <body data-user={Astro.locals.user ? '1' : undefined}>
     <header class="site-header">
       <div class="wrap">
-        <a class="wordmark" href="/">دیوان</a>
+        <a class="wordmark" href="/"><img class="logo" src="/logo/shamsa-icon.svg" width="44" height="44" alt="" /><span>دیوان</span></a>
         <form class="search-form" action="/search" method="get" role="search">
           <input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
           <button type="button" id="rom-toggle" class="in-box rom" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index d04fc1f3..a5ad5678 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -87,7 +87,12 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami
 
 /* header: logo + search + toggles in a gold-bordered bar */
 .site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
-.wordmark { font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; }
+.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; }
+/* the logo: the shamsa medallion, then the word */
+.wordmark .logo { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); transition: transform .3s; }
+.wordmark:hover .logo { transform: rotate(15deg); }
+.wordmark span { padding-bottom: .45em; margin-bottom: -.2em; } /* Nastaliq hangs below its line box: room underneath centres the ink on the medallion */
+@media (min-width: 641px) { .wordmark span { position: relative; top: -.22em; } }
 .search-form { flex: 1; min-width: 0; display: flex; position: relative; }
 .search-form input { background: var(--surface-sunken); }
 .search-form input { flex: 1; min-width: 0; padding: 4px 14px; padding-inline-end: 116px; } /* min-width 0: shrinks instead of pushing past the icons */
@@ -216,7 +221,8 @@ h1 + .muted { text-align: center; margin-top: 0; }
 /* phones: wordmark and icons on one row, the search box on its own full-width row below */
 @media (max-width: 640px) {
   .site-header .wrap { gap: 8px; }
-  .wordmark { font-size: 1.7rem; padding-bottom: .45em; margin-bottom: -.2em; } /* Nastaliq's descenders hang below the line box: room so they clear the search row */
+  .wordmark { font-size: 1.7rem; gap: 8px; }
+  .wordmark .logo { width: 38px; height: 38px; } /* Nastaliq's descenders hang below the line box: room so they clear the search row */
   .toggles { margin-inline-start: auto; gap: 4px; }
   .search-form { order: 3; flex-basis: 100%; }
 }