iPhone-Symbole: quadratisch und deckend statt abgerundet

Gemeldet: "auf dem pc und auf dem handy soll alles funktionieren, auf
dem einen klappt es und auf dem anderen nicht."

Der Grund ist, dass PC und Handy ihr Symbol an drei verschiedenen
Stellen holen -- und jede stellt andere Anforderungen:

  Browser-Reiter   das normale Symbol, runde Ecken erlaubt
  Android          die maskable-Fassung, aussen wird beschnitten
  iPhone           <link rel=apple-touch-icon> -- und iOS rundet SELBST
                   ab und fuellt alles Durchsichtige mit SCHWARZ

Unser 180er brachte seine eigene Rundung mit, also durchsichtige Ecken.
Auf dem iPhone wurden daraus schwarze Zipfel, die dann ein zweites Mal
beschnitten wurden. Auf dem PC sieht dieselbe Datei tadellos aus --
genau daher der Unterschied zwischen den Geraeten.

Jetzt wird die 180er-Fassung randvoll und deckend gebaut. Nachgemessen
an allen zehn: 0,00 Prozent durchsichtig, Ecken voll deckend. Die
normale Fassung bleibt abgerundet (4,75 Prozent) -- auch das gemessen,
damit der Fix nicht die andere Seite kaputtmacht.

Dazu eine Pruefung in pruef-struktur.mjs: alle sechs Groessen je App
vorhanden, und jede Seite nennt beide Symbolarten. Fehlt das
iPhone-Symbol, nimmt iOS einen Bildschirmausschnitt der Seite.

Co-Authored-By: Claude Opus 5 <[email protected]>

tools/app-symbole.mjs

@@ -317,7 +317,7 @@ export const STIL_JE_APP = {
  *  Jede Kachel bekommt deshalb einen eigenen Namen aus Stil und App.
  *  Damit lässt sich beliebig viel davon in ein Dokument legen, ohne
  *  dass sich zwei ins Gehege kommen. */
-export function symbolTeil(f, stilName, n, { maskable = false, logoDaten } = {}) {
+export function symbolTeil(f, stilName, n, { maskable = false, apple = false, logoDaten } = {}) {
   const stil = STILE[stilName];
   const logoFilter = typeof stil.logo === "function" ? stil.logo(f) : stil.logo;
 
@@ -345,8 +345,23 @@ export function symbolTeil(f, stilName, n, { maskable = false, logoDaten } = {})
 
      78 % ist der Anteil, der bei jeder gaengigen Maske heil bleibt
      (Kreis, Quadrat mit runden Ecken, Tropfen). */
-  const radius = maskable ? 0 : 22.4;      // 22,4 % ist die Apple-Rundung
-  const k = `s-${stilName}-${f.schluessel}${maskable ? "-m" : ""}`;
+  /* APPLE-TOUCH-ICON: quadratisch, undurchsichtig, OHNE eigene Rundung.
+
+     BEFUND 05.09.2026 ("auf dem einen klappt es und auf dem anderen
+     nicht"). iOS holt sein Symbol NICHT aus dem Manifest, sondern aus
+     <link rel="apple-touch-icon">. Und es behandelt diese Datei anders
+     als jeder andere Browser: Es rundet die Ecken SELBST ab und fuellt
+     alles Durchsichtige mit SCHWARZ.
+
+     Unser Symbol brachte seine eigene Rundung mit -- also durchsichtige
+     Ecken. Auf dem iPhone wurden daraus schwarze Zipfel, die dann ein
+     zweites Mal beschnitten wurden. Auf dem PC faellt das nicht auf,
+     weil Windows und Chrome mit Transparenz umgehen koennen. Genau
+     daher der Unterschied zwischen den beiden Geraeten.
+
+     Deshalb hier: randvoll, eckig, deckend. Die Rundung macht iOS. */
+  const radius = (maskable || apple) ? 0 : 22.4;   // 22,4 % ist die Apple-Rundung
+  const k = `s-${stilName}-${f.schluessel}${maskable ? "-m" : ""}${apple ? "-a" : ""}`;
 
   /* Das eigentliche Symbol ist bei maskable kleiner als die Datei. */
   const innen = maskable ? Math.round(n * 0.78) : n;
@@ -527,7 +542,7 @@ const GROESSEN = [
   { n: 512, maskable: false, endung: "512" },
   { n: 192, maskable: true, endung: "192-maskable" },
   { n: 512, maskable: true, endung: "512-maskable" },
-  { n: 180, maskable: false, endung: "180" },
+  { n: 180, maskable: false, apple: true, endung: "180" },
   { n: 32, maskable: false, endung: "32" },
 ];
 
@@ -551,7 +566,7 @@ async function bauen() {
     }
     for (const g of GROESSEN) {
       await seite.setViewportSize({ width: g.n, height: g.n });
-      await seite.setContent(symbolHtml(f, stilName, g.n, { maskable: g.maskable, logoDaten }),
+      await seite.setContent(symbolHtml(f, stilName, g.n, { maskable: g.maskable, apple: g.apple, logoDaten }),
         { waitUntil: "networkidle" });
       await seite.waitForTimeout(60);
       const datei = join(ziel, `${f.schluessel}-${g.endung}.png`);