diff --git a/demo/index.html b/demo/index.html
index 41c2c8f..ff3aab2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -25,7 +25,7 @@
 <meta name="twitter:description" content="Interactive showcase of every Forge Select feature: single/multi select, tags, drag-and-drop tag reordering, option groups, tree select, custom templates, rich items, virtual scrolling, i18n, and events.">
 <meta name="twitter:image" content="https://forgeselect.konexforge.com/assets/og-banner.png">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2384cc16'/><stop offset='0.5' stop-color='%2322c55e'/><stop offset='1' stop-color='%2315803d'/></linearGradient></defs><path d='M4 3L12 9L20 3' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 12L12 18L20 12' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 21L12 27L20 21' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
-<link rel="apple-touch-icon" href="../assets/og-banner.png">
+<link rel="apple-touch-icon" href="../assets/app-icon.png">
 <link rel="stylesheet" href="../styles/forge-select.css">
 <link rel="stylesheet" href="../assets/site.css">
 <script type="application/ld+json">
diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs
index 383f4a1..8d0f159 100644
--- a/scripts/build-site.mjs
+++ b/scripts/build-site.mjs
@@ -235,7 +235,7 @@ function layout({ title, description, canonicalPath, jsonLdBlocks, active, conte
 <meta name="twitter:description" content="${description}">
 <meta name="twitter:image" content="${SITE_URL}assets/og-banner.png">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2384cc16'/><stop offset='0.5' stop-color='%2322c55e'/><stop offset='1' stop-color='%2315803d'/></linearGradient></defs><path d='M4 3L12 9L20 3' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 12L12 18L20 12' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 21L12 27L20 21' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
-<link rel="apple-touch-icon" href="../assets/og-banner.png">
+<link rel="apple-touch-icon" href="../assets/app-icon.png">
 <link rel="stylesheet" href="../assets/site.css">
 <link rel="stylesheet" href="../assets/hljs-light.css" media="(prefers-color-scheme: light)">
 <link rel="stylesheet" href="../assets/hljs-dark.css" media="(prefers-color-scheme: dark)">
@@ -296,6 +296,13 @@ async function main() {
   // LinkedIn render svg og:image/twitter:image inconsistently, so a real
   // PNG is required for a reliable social preview.
   await sharp(path.join(out, "assets/og-banner.svg")).png().toFile(path.join(out, "assets/og-banner.png"));
+  // Separate square app icon for apple-touch-icon — the wide 1200x630
+  // og-banner is the wrong aspect ratio for a home-screen icon and gets
+  // squished/cropped on iOS.
+  await sharp(path.join(out, "assets/app-icon.svg"))
+    .resize(180, 180)
+    .png()
+    .toFile(path.join(out, "assets/app-icon.png"));
   await cp(path.join(root, "site/playground"), path.join(out, "playground"), { recursive: true });
   await cp(path.join(root, "site/theme-builder"), path.join(out, "theme-builder"), { recursive: true });
   await cp(path.join(root, "demo"), path.join(out, "demo"), { recursive: true });
diff --git a/site/assets/app-icon.svg b/site/assets/app-icon.svg
new file mode 100644
index 0000000..8b99a00
--- /dev/null
+++ b/site/assets/app-icon.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" role="img" aria-label="Forge Select">
+  <defs>
+    <linearGradient id="iconGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#84cc16"/>
+      <stop offset="0.5" stop-color="#22c55e"/>
+      <stop offset="1" stop-color="#15803d"/>
+    </linearGradient>
+  </defs>
+  <rect width="192" height="192" rx="42" fill="#0b1210"/>
+  <g transform="translate(24,6) scale(6)" fill="none" stroke="url(#iconGrad)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 3L12 9L20 3"/>
+    <path d="M4 12L12 18L20 12"/>
+    <path d="M4 21L12 27L20 21"/>
+  </g>
+</svg>
diff --git a/site/index.html b/site/index.html
index bfb0265..03d6949 100644
--- a/site/index.html
+++ b/site/index.html
@@ -26,7 +26,7 @@
 <meta name="twitter:description" content="Forge Select is a zero-dependency, accessible, high-performance select component with rich items, virtual scrolling, tags, AJAX, tree select, drag-and-drop tag ordering, and a plugin architecture.">
 <meta name="twitter:image" content="https://forgeselect.konexforge.com/assets/og-banner.png">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2384cc16'/><stop offset='0.5' stop-color='%2322c55e'/><stop offset='1' stop-color='%2315803d'/></linearGradient></defs><path d='M4 3L12 9L20 3' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 12L12 18L20 12' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 21L12 27L20 21' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
-<link rel="apple-touch-icon" href="./assets/og-banner.png">
+<link rel="apple-touch-icon" href="./assets/app-icon.png">
 <link rel="stylesheet" href="./assets/site.css">
 <script type="application/ld+json">
 {
diff --git a/site/playground/index.html b/site/playground/index.html
index 3a53bd2..de5ee5c 100644
--- a/site/playground/index.html
+++ b/site/playground/index.html
@@ -25,7 +25,7 @@
 <meta name="twitter:description" content="Write and run Forge Select code live in the browser with ready-made presets for every major feature — no install required.">
 <meta name="twitter:image" content="https://forgeselect.konexforge.com/assets/og-banner.png">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2384cc16'/><stop offset='0.5' stop-color='%2322c55e'/><stop offset='1' stop-color='%2315803d'/></linearGradient></defs><path d='M4 3L12 9L20 3' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 12L12 18L20 12' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 21L12 27L20 21' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
-<link rel="apple-touch-icon" href="../assets/og-banner.png">
+<link rel="apple-touch-icon" href="../assets/app-icon.png">
 <link rel="stylesheet" href="../styles/forge-select.css">
 <link rel="stylesheet" href="../assets/site.css">
 <script type="application/ld+json">
diff --git a/site/theme-builder/index.html b/site/theme-builder/index.html
index bd64ccb..b65ec06 100644
--- a/site/theme-builder/index.html
+++ b/site/theme-builder/index.html
@@ -25,7 +25,7 @@
 <meta name="twitter:description" content="Customize every Forge Select CSS variable live and copy the generated theme CSS — no build step required.">
 <meta name="twitter:image" content="https://forgeselect.konexforge.com/assets/og-banner.png">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2384cc16'/><stop offset='0.5' stop-color='%2322c55e'/><stop offset='1' stop-color='%2315803d'/></linearGradient></defs><path d='M4 3L12 9L20 3' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 12L12 18L20 12' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='M4 21L12 27L20 21' stroke='url(%23g)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
-<link rel="apple-touch-icon" href="../assets/og-banner.png">
+<link rel="apple-touch-icon" href="../assets/app-icon.png">
 <link rel="stylesheet" href="../styles/forge-select.css">
 <link rel="stylesheet" href="../assets/site.css">
 <script type="application/ld+json">