Ein App-Icon ist eine einzige Zeichnung, die 36 verschiedene Größen tragen muss, auf 5 Plattformen, in Kontexten von einem Browser-Tab mit 16 Pixeln bis zu einem Store-Upload mit 1024. Der App-Icon-Generator nimmt ein Foto, schneidet es per Beschnitt zum Quadrat zu und exportiert die ganze Familie als ein ZIP: 36 PNG in Ordnern je Plattform, dazu ein PWA-Manifest und ein iOS-Icon-Set-Manifest. Nichts wird hochgeladen: der Zuschnitt, das Resampling und der ZIP-Zusammenbau laufen auf dem Canvas im Browser.
Die 36 Größen auf 5 Plattformen
Die Liste hat 12 iOS, 9 Android, 5 Web, 6 macOS und 4 Windows-Einträge. iOS reicht vom 29-Pixel-Einstellungsicon bis zum 1024-Pixel-App-Store-Upload, dazwischen 40, 58, 60, 76, 80, 87, 120, 152, 167 und 180. Android deckt das 512-Pixel-Play-Store-Icon, die 2 adaptiven Icon-Größen (48 und 192) und die 5 Launcher-Dichten von 36 bei ldpi bis 192 bei xxxhdpi ab. Web hält das PWA-Paar bei 192 und 512, das 180-Pixel-Safari-apple-touch-icon und die 2 Favicons bei 32 und 16. macOS steigt über 16, 32, 128, 256, 512, 1024; Windows bringt Kacheln bei 44, 71 und 150 plus ein 500-Pixel-Store-Bild. Der Plattformumschalter springt ganze Gruppen übers: ein nur-Web-Build lädt 5 PNG und ein Manifest statt der vollen 36. Wenn Sie nur eine Zielgröße brauchen, macht die Bild-Größenänderung das einzelne Resampling mit derselben Beschnitt-Regel.
Von einem 4000×3000-Foto zu einem 512-Icon
Jedes Ziel ist quadratisch, also muss ein rechteckiges Foto zuerst quadratisch werden, bevor es skaliert wird. Die Regel ist der Beschnitt: scale = max(w / iw, h / ih), wobei w und h das Ziel und iw, ih die Quelle sind. Für ein 4000×3000-Foto in ein 512-Ziel ist scale = max(512/4000, 512/3000) = max(0,128, 0,17067) = 0,17067, das Quellquadrat misst 512/0,17067 = 3000 an der Seite, zentriert: sx = (4000 − 3000)/2 = 500, sy = 0. Das 4:3-Foto liefert seinen 3000×3000-Mittelpunkt; 500 Pixel je Seite werden weggeschnitten. Ein Hochformat-Foto verliert oben und unten. Das max ist beabsichtigt: Das min würde das ganze Foto in das Quadrat setzen und die Ecken leer lassen, genau das, was ein Icon nicht haben darf. Der Bild-Konverter ändert die Kodierung ohne die Geometrie anzufassen, und das Bild zuschneiden übernimmt dieselbe Rechnung für das mittlere Quadrat, wenn nur der Zuschnitt gefragt ist.
Ein Resampling je Größe, keine Kette
Jede der 36 Ausgaben wird in einem einzigen Canvas-Betrieb direkt aus dem Originalbild gezeichnet, Glättung an, Qualität auf hoch. Es gibt keine Kette von 1024 über 512 zu 256: Das 16-Pixel-Favicon kommt aus einem einzigen Schritt mit 0,015625 aus einer 1024-Quelle, und das 128-Pixel-macOS-Icon aus einem einzigen Schritt mit 0,25 aus 512. Das hat eine sichtbare Folge. Weil alle Größen denselben Beschnitt und dasselbe Resampling teilen, ist das Detail, das bei 1024 gut lesbar ist, genau das Detail, das bei 16 zu Rauschen wird, und die Vorschau-Reihe bei 32, 48, 64, 128 und 180 ist der Ort, an dem ein schwaches Design sich vor dem ZIP-Bau zeigt.
Was in das ZIP kommt
Das Archiv hält bis zu 36 PNG in Ordnern ios/, android/, web/, macos/ und windows/ plus 3 Dokumente. Wenn Web ausgewählt ist, gibt es ein manifest.json: der App-Name, ein short_name, gekürzt auf die ersten 12 Zeichen (My Very Long App meldet sich als My Very Long), die 2 PWA-Icons mit dem Zweck any maskable, Theme und Hintergrund auf #ffffff, und display standalone. Wenn iOS ausgewählt ist, gibt es ein ios/Contents.json mit den 14 Einträgen, die Xcode erwartet, und die die 20-, 29-, 40-, 60-, 76-, 83,5- und 1024-Punktgrößen auf die PNG-Dateien mappen. Eine README.md listet die Größen- und Dateitabelle je Plattform. Der Dateiname leitet sich vom App-Namen ab: Jedes Zeichen, das kein Buchstabe und keine Ziffer ist, wird zu einem Gedankenstrich, alles wird kleingeschrieben, also ergibt My Cool App my-cool-app-icons.zip. Ein Endungszeichen wird zum zweiten Gedankenstrich (my-cool-app--icons.zip), einer der Gründe, warum das Namensfeld bei 30 Zeichen endet. PNG ist ein verlustfreies Kodierverfahren und das Gewicht eines 1024-Icons entscheidet die Zeichnung; wenn der Store oder das Web-Budget auf Byte schaut, ist der Bildkompressor der Ort, an dem die Neu-Kodierung dieselben Pixel billiger macht.
Wohin die Icons gehen: Manifest, Splash, Store
Die 2 Manifest-Icons sind die, die der Browser installiert: 192 für den Installationsbildschirm, 512 für den Splash und die Teilungskarte. Der Zweck any maskable sagt dem Betriebssystem, dass es das Bild in einen Kreis oder ein Squircle zuschneiden darf, und darum ist die sichere Zone die Mitte, ungefähr 80 Prozent des Canvas: Halten Sie das Motiv drin und überlassen Sie den Rahmen der Plattform. Die 32 und 16 in web/ sind Favicons-Geschwister, das Tab-Icon, das der Browser holt, bevor er das Manifest liest. Der Favicon-Generator deckt den Rest dieser Familie ab, einschließlich des ICO in Mehrfachgrößen, des mstile für Windows und der zum Einfügen fertigen HTML-Link-Tags. Die App-Store- und Play-Store-Einträge sind die, die ein Prüfer zuerst sieht, also sind 1024 und 512 die Größen, die einen zweiten Blick wert sind.
Die gleiche Resize-Rechnung überall
Der Beschnitt plus ein einziges hochwertiges Downsampling ist ein kleines Stück Mathematik, das über den ganzen Site erscheint. Die Bild-Größenänderung wendet es auf ein einzelnes Ziel an, der Kompressor kodiert die daraus kommenden Pixel neu, und der Dateigrößen-Konverter ist der Ort, an dem Sie das Ergebnis wiegen: Ein ZIP mit 36 PNG ist der Ort, an dem eine 1024-Quelle Sie in Byte kostet, und 16-Pixel-Dateien kosten fast nichts. Wenn das Problem der Zuschnitt selbst ist, das Motiv in der Ecke und der mittlere Quadrat-Beschnitt verfehlt es, geht der Bild-Zuschnitt-Führer vor dem Downsampling durch die Beschnitt-Rechnung. Das Icon ist das letzte Artefakt, das diese Mathematik produziert: ein Quadrat, 36 Größen, und in jedem von ihnen dasselbe Zentrum.