From acbf5f16ce7a1dddcabb48edb925a6844e6d1a2f Mon Sep 17 00:00:00 2001 From: Nick Szaunig Date: Sat, 5 Sep 2026 18:06:22 +0200 Subject: [PATCH] fix: add apple-touch-icon for iOS "Add to Home Screen" iOS Safari ignores the web manifest for home-screen icons entirely and needs its own apple-touch-icon link, which Next.js only emits when app/apple-icon.tsx (or a literal apple-icon.png) exists. Without it, iOS falls back to a screenshot of the open page instead of the brand mark. Mirrors the existing public/icon.svg design via next/og. Co-Authored-By: Claude Sonnet 5 --- ApiCore-Frontend/src/app/apple-icon.tsx | 42 +++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 ApiCore-Frontend/src/app/apple-icon.tsx diff --git a/ApiCore-Frontend/src/app/apple-icon.tsx b/ApiCore-Frontend/src/app/apple-icon.tsx new file mode 100644 index 0000000..69b4c1c --- /dev/null +++ b/ApiCore-Frontend/src/app/apple-icon.tsx @@ -0,0 +1,42 @@ +import { ImageResponse } from "next/og"; + +// iOS's "Add to Home Screen" doesn't read the web manifest at all - it needs +// its own , which only exists if this special +// file (or a literal apple-icon.png) is present. Without it, iOS falls back +// to a screenshot of whatever page was open, not the app's brand mark. +// Mirrors public/icon.svg's existing design (used in the manifest for +// Android/Chrome) as plain positioned divs rather than inline SVG paths, +// since that renders reliably through Satori (next/og's renderer). iOS +// applies its own rounded-square mask on top, so this stays a plain square. +export const size = { width: 180, height: 180 }; +export const contentType = "image/png"; + +export default function AppleIcon() { + const barStyle = { + position: "absolute" as const, + left: "30%", + width: "40%", + height: "10%", + borderRadius: 6, + background: "#f5c518", + }; + + return new ImageResponse( + ( +
+
+
+
+
+ ), + { ...size }, + ); +}