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(
+ (
+