🧰 UtlKit

App Icon Generator: How to Turn a 4000×3000 Photo into 36 Icons from 16 to 1024 Pixels across 5 Platforms, with the Square Crop, the ZIP and the Manifests Explained

Generate the full app icon set from one photo: a cover-crop turns any rectangle into a centered square, one high-quality resample feeds all 36 sizes from 16 to 1024 pixels across iOS, Android, web, macOS and Windows, the ZIP carries 36 PNG plus a PWA manifest with a 12-character short_name and a 14-entry iOS Contents.json, and the file name my-cool-app-icons.zip derives from the app name, everything local.

An app icon is one drawing that has to wear 36 different sizes, on 5 platforms, in contexts from a 16-pixel browser tab to a 1024-pixel store upload. The App Icon Generator takes a single photo, cover-crops it to a square and exports the whole family as one ZIP: 36 PNGs in per-platform folders, plus a PWA manifest and an iOS icon-set manifest. Nothing is uploaded; the crop, the resampling and the ZIP assembly all run on the canvas of the browser.

The 36 Sizes Across Five Platforms

The list is 12 iOS, 9 Android, 5 web, 6 macOS and 4 Windows entries. iOS runs from the 29-pixel settings icon to the 1024-pixel App Store upload, with 40, 58, 60, 76, 80, 87, 120, 152, 167 and 180 in between. Android covers the 512-pixel Play Store icon, two adaptive-icon sizes (48 and 192) and the five launcher densities from 36 at ldpi to 192 at xxxhdpi. Web holds the PWA pair at 192 and 512, the 180-pixel Safari apple-touch-icon, and the two favicons at 32 and 16. macOS steps through 16, 32, 128, 256, 512, 1024; Windows ships tiles at 44, 71 and 150 plus a 500-pixel store image. The platform toggle skips whole groups, so a web-only build downloads 5 PNGs and a manifest instead of the full 36. If you only need one target dimension, the image resizer does the single resize under the same cover-crop rule.

From a 4000×3000 Photo to a 512 Icon

Every target is square, so a rectangular photo has to become a square before it can scale. The rule is cover-crop: scale = max(w / iw, h / ih), where w and h are the target and iw, ih the source. For a 4000×3000 photo into a 512 target, scale = max(512/4000, 512/3000) = max(0.128, 0.17067) = 0.17067, so the source square is 512/0.17067 = 3000 on a side, centered: sx = (4000 − 3000)/2 = 500, sy = 0. The 4:3 photo hands over its 3000×3000 center; 500 pixels of each side are cut. A portrait photo loses top and bottom instead. The max is deliberate: min would fit the whole photo inside the square and leave the corners empty, exactly what an icon must not have. The image converter changes the encoding without touching the geometry, and the image cropper applies the same center-square math when you want the crop alone.

One Resample Per Size, Not a Chain

Each of the 36 outputs is drawn in a single canvas operation straight from the original image, smoothing on, quality set to high. There is no 1024-to-512-to-256 chain: the 16-pixel favicon comes from one 0.015625 step off a 1024 source, and the 128-pixel macOS icon from one 0.25 step off 512. That has a visible consequence. Because every size shares the same crop and the same resample, a detail that reads well at 1024 is the very detail that turns to noise at 16, and the preview row at 32, 48, 64, 128 and 180 is where a weak design shows itself before the ZIP is built.

What Lands in the ZIP

The archive holds up to 36 PNGs in ios/, android/, web/, macos/ and windows/ folders, plus three documents. With web selected there is a manifest.json: the app name, a short_name cut to the first 12 characters (My Very Long App reports itself as My Very Long), the two PWA icons with the any maskable purpose, theme and background set to #ffffff, and display standalone. With iOS selected there is an ios/Contents.json with the 14 entries Xcode expects, mapping the 20, 29, 40, 60, 76, 83.5 and 1024 point sizes to the PNG files. A README.md lists the size-to-file table per platform. The download name derives from the app name: every character that is not a letter or a digit becomes a dash and everything is lowercased, so My Cool App produces my-cool-app-icons.zip. A trailing punctuation mark becomes a second dash (my-cool-app--icons.zip), one reason the name field stops at 30 characters. PNG is a lossless codec, so the 1024 icon weighs what the drawing dictates; when the store or the web budget counts bytes, the image compressor is where the re-encoding makes the same pixels cheaper.

Where the Icons Go: Manifest, Splash, Store

The two manifest icons are the ones the browser installs: 192 for the install screen, 512 for the splash and the share card. The any maskable purpose tells the operating system it may crop the image into a circle or a squircle, which is why the safe zone is the center, roughly 80 percent of the canvas: keep the subject inside and leave the frame to the platform. The 32 and 16 files in web/ are the favicon siblings, the tab icon the browser fetches before it reads the manifest. The favicon generator covers the rest of that family, including the multi-size ICO, the Windows mstile and the ready-to-paste HTML link tags. The App Store and Play Store entries are the first thing a reviewer sees, so 1024 and 512 are the sizes worth a second look.

The Same Resize Math Everywhere

Cover-crop plus one high-quality downscale is a small piece of math that shows up across the site. The image resizer applies it to a single target, the compressor re-encodes the pixels that come out of it, and the file size converter is where you weigh the result: a ZIP of 36 PNGs is where a 1024 master costs you in bytes, and the 16-pixel files cost almost nothing. If the problem is the crop itself, the subject sitting in a corner while the center-square cut misses it, the image cropping guide walks through the crop math before the resize. The icon is the last artifact that math produces: one square, 36 sizes, and the same center in every one of them.

Related Tools

Frequently Asked Questions

How many files are in the ZIP?

Up to 39 when all five platforms are on: 36 PNG, one manifest.json, one ios/Contents.json and one README.md. Deselecting a platform drops its PNG; for web it also drops the manifest, and for iOS the Contents.json. The README.md is always present.

Can I use a photo that is not square?

Yes, and that is the normal case. The cover-crop turns any rectangle into a centered square: a 4000×3000 landscape photo gives up 500 pixels of each side, a portrait one gives up top and bottom. The subject should sit near the center of the frame, because every size crops the same square. If the subject is off-center, crop it first and feed the tool a square.

Why is the manifest short_name only 12 characters?

Because the PWA specification caps it at 12: it is the label space an install screen or a home-screen bubble has. The tool applies the cap itself, so a 30-character app name still yields a usable short label, cut at character 12. The full name stays in the name field, where the limit is longer.

Why 36 sizes when one 1024 image could be scaled down?

Because the platforms do not scale for you. The App Store wants its 1024, the launcher wants a 36-pixel ldpi file on disk, and the browser wants a 16-pixel favicon before it reads the manifest. Each consumer names a file and a size, and the 36 are that named set: 12 for iOS, 9 for Android, 5 for web, 6 for macOS and 4 for Windows, from 16 to 1024 pixels.

Is my photo sent to a server?

No. The cover-crop, the 36 resamples, the PNG encoding, the manifest writing and the ZIP assembly all run in the browser on the canvas and Web APIs of the local machine. The photo never leaves it, which is what makes the tool usable for artwork you would not paste into an upload box.

Related Articles