Fix apple-touch-icon: use a square icon instead of the wide OG banner

[cmm-cmm]

Summary

Branch was resynced to the latest main (v0.6.0 — dev is already fully merged in, so there was nothing left to bring over there); this PR is the actual fix requested for the broken favicon.

• Root cause: <link rel="apple-touch-icon"> on all five pages (landing, generated docs layout, playground, theme-builder, demo) pointed at assets/og-banner.png — the 1200×630 wide social-preview banner. iOS/home-screen and other icon consumers expect a square image, so the banner rendered squished/cropped instead of the chevron logo used everywhere else as the real favicon.
• Fix: added site/assets/app-icon.svg — a square (192×192, rounded corners) icon reusing the same gradient chevron mark on the site's dark background. scripts/build-site.mjs now rasterizes it to a 180×180 PNG at build time (same pattern as the existing OG-banner rasterization), and all five apple-touch-icon references now point to assets/app-icon.png instead of assets/og-banner.png.
• The actual favicon (rel="icon", the inline gradient-chevron SVG data URI) was already correct on every page — only apple-touch-icon was wrong.

Test plan

• npm run typecheck, npm run lint, npm run format:check, npm test (142/142) all pass.
• npm run build:site then node scripts/check-site.mjs — all generated links/assets resolve; confirmed app-icon.png rasterizes to exactly 180×180.
• Headless Chromium across all 5 pages (/, /docs/, /playground/, /theme-builder/, /demo/): each resolves apple-touch-icon to assets/app-icon.png (200, correct bytes), rel="icon" unchanged, zero console errors.
• Visually reviewed the rasterized icon — clean square dark icon with the green gradient chevron mark, matches brand.

---

Generated by Claude Code

Summary by CodeRabbit

• Improvements
  • Updated the Apple home screen icon to use the dedicated application icon across the site, demo, playground, and Theme Builder pages.
  • Improved icon generation during site builds for consistent display on Apple devices.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b790416b-ec71-4cc3-94e3-5224b656404f

📥 Commits

Reviewing files that changed from the base of the PR and between 1879721 and 0ece751.

⛔ Files ignored due to path filters (1)

• site/assets/app-icon.svg is excluded by !**/*.svg

📒 Files selected for processing (5)

• demo/index.html
• scripts/build-site.mjs
• site/index.html
• site/playground/index.html
• site/theme-builder/index.html

---

📝 Walkthrough

Walkthrough

The build now creates a 180x180 PNG from the SVG app icon, and site pages reference it as their Apple touch icon instead of the OG banner.

Changes

Apple touch icon asset update

Layer / File(s)	Summary
Generate app icon asset scripts/build-site.mjs	The build rasterizes app-icon.svg into assets/app-icon.png and updates generated HTML metadata to reference it.
Update page icon references demo/index.html, site/index.html, site/playground/index.html, site/theme-builder/index.html	Apple touch icon links now point to app-icon.png instead of og-banner.png.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: replacing the wide OG banner with a square apple-touch-icon.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/readme-documentation-expansion-1j8wa1

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	forge-select	0ece751	Commit Preview URL Branch Preview URL	Jul 21 2026, 02:21 PM