From 0ece751b906a05d791a5d0595cbbfca441584496 Mon Sep 17 00:00:00 2001
From: cmm-cmm <68763522+cmm-cmm@users.noreply.github.com>
Date: Tue, 21 Jul 2026 14:20:51 +0000
Subject: [PATCH] Fix apple-touch-icon: use a square icon instead of the wide
 OG banner

All five pages (landing, docs layout, playground, theme-builder, demo)
pointed <link rel=apple-touch-icon> at assets/og-banner.png, a
1200x630 social-preview banner. iOS/home-screen and other consumers
expect a square icon, so the wide banner rendered squished/cropped and
didn't match the chevron logo used as the actual favicon everywhere.

- site/assets/app-icon.svg: a square (192x192, rounded) icon with the
  same gradient chevron mark, on the site's dark background
- build-site.mjs rasterizes it to a 180x180 PNG at build time
  (alongside the existing og-banner rasterization) and both the
  generated docs layout and the four static pages now reference
  assets/app-icon.png instead of assets/og-banner.png
---
 demo/index.html               |  2 +-
 scripts/build-site.mjs        |  9 ++++++++-
 site/assets/app-icon.svg      | 15 +++++++++++++++
 site/index.html               |  2 +-
 site/playground/index.html    |  2 +-
 site/theme-builder/index.html |  2 +-
 6 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 site/assets/app-icon.svg

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">