You've spent weeks designing the perfect app icon. The shape is right, the colours work, the symbol communicates exactly what your app does. Then you open the App Store submission checklist and discover you need to provide 20 different sizes for iOS alone — not counting Android, macOS, Windows, web favicons, or PWA manifest icons.
This is one of the most tedious parts of shipping an app, and it shouldn't require a Photoshop batch script or a Figma plugin that half-works. Here is the complete picture of what each platform needs, what format requirements actually matter, common mistakes that cause rejection, and how to automate the entire process correctly.
Why Platforms Need Different Sizes
Each platform renders icons at different sizes in different contexts: the App Store listing, the home screen, the settings panel, search results, notifications, Spotlight, the Dock, and the system tray. Each context has a different required pixel dimension because the OS renders them at different physical sizes on different devices with different pixel densities.
Simply downscaling a single large image to every required dimension produces muddy, pixelated icons at smaller sizes because the downscaling algorithm must discard detail. At 29×29 pixels, a complex logo with fine lines and gradients looks like noise. Professional icon design addresses this by creating subtly simplified versions of the icon for smaller size tiers — fewer details, heavier strokes, more contrast. At minimum, your source asset must be clean, vector-based or high-resolution, with no sub-pixel artifacts.
PNG vs SVG for App Icons
The question of PNG vs SVG comes up constantly, and the answer depends on the context. App stores and native platforms (iOS, Android, macOS, Windows) require rasterised PNG exports — they do not accept SVG at the icon submission stage. The platforms render icons in their own compositing systems and need pixel-exact bitmaps at each required dimension.
SVG is your ideal source format for icon design. Because SVG is vector-based, it scales infinitely without loss, making it the perfect master from which to export all PNG sizes. If your designer delivers a 1024×1024 PNG, it will work — but an SVG master gives you a cleaner starting point. One important caveat: complex SVG filters, blur effects, and certain gradient types may render differently at small sizes than you expect. Always preview your generated icons at their actual display size, not scaled up in your file manager.
For web icons (favicons and PWA manifest icons), SVG is increasingly acceptable. Modern browsers support SVG favicons directly, and an SVG favicon has the advantage of being theme-aware: you can use a CSS media query inside the SVG to swap between light and dark versions. However, you still need PNG fallbacks for Safari and older browsers.
Required Icon Sizes by Platform
iOS and iPadOS
Apple requires PNG icons with no alpha channel (no transparency). The system applies its own rounded-rectangle mask, so your source image should fill the full square canvas. Required sizes for a universal iOS app submission:
1024×1024— App Store listing (required, use as your master source)180×180— iPhone home screen @3x (iPhone 12 and later)120×120— iPhone home screen @2x167×167— iPad Pro home screen @2x152×152— iPad home screen @2x87×87— iPhone Spotlight @3x / iPhone Settings @3x80×80— iPad Spotlight @2x / iPhone Spotlight @2x76×76— iPad home screen @1x60×60— iPhone notifications @3x58×58— iPhone Settings @2x / iPad Settings @2x40×40— iPhone Spotlight @1x / iPad Spotlight @1x29×29— iPhone Settings @1x / iPad Settings @1x20×20— iPhone notifications @1x / iPad notifications @1x
As of Xcode 14, Apple simplified requirements — you can provide just the 1024×1024 image and Xcode generates the other sizes. However, the auto-generated smaller sizes are often lower quality than hand-crafted exports, and the App Store review team has been known to reject apps with visually poor small icons.
Android: Adaptive Icons
Android 8.0 (API 26) introduced adaptive icons — a foreground layer and a background layer that the launcher composites together with its chosen mask shape (circle, squircle, rounded rectangle, teardrop, depending on the device manufacturer). This allows a single icon to look native across all Android launchers. Your foreground graphic must fit within a safe zone of 66dp centred on a 108dp canvas — the outer ring can be clipped by the mask.
512×512— Google Play Store listing192×192— xxxhdpi launcher icon (Pixel 4 and newer)144×144— xxhdpi launcher icon96×96— xhdpi launcher icon72×72— hdpi launcher icon48×48— mdpi launcher icon
For adaptive icons, you also need the foreground and background layers at each density (typically a transparent foreground PNG and a solid colour or pattern background PNG). Android Studio can generate these from a source image using the Image Asset Studio tool.
macOS
macOS uses ICNS format internally, but Xcode accepts a set of PNG files in an AppIcon.appiconset asset catalog and compiles them. Required sizes are 16, 32, 128, 256, and 512 pixels — each also at @2x (Retina), giving you 10 files total. Since macOS 11 Big Sur, the system applies a squircle mask automatically, so your icon should fill the full square canvas without pre-rounding the corners yourself. macOS icons traditionally have a white or light background with drop shadow, though this is a design convention, not a technical requirement.
Web Favicons and PWA Icons
Web apps need a layered set of icon sizes to cover every context: the browser tab, bookmarks, the address bar, and add-to-homescreen on mobile. The minimum required set:
favicon.ico— multi-size ICO file containing 16×16 and 32×32 PNG frames; placed in the site rootfavicon-16x16.pngandfavicon-32x32.png— referenced via HTML<link>tagsapple-touch-icon.pngat 180×180 — for iOS Safari "Add to Home Screen"; must have a background colour (no transparency)192×192and512×512PNGs in yourmanifest.json— minimum for PWA installabilitymaskablepurpose icon at 512×512 — Android uses this for adaptive icon treatment on PWA installs; your icon must have a safe zone of 80% of the canvas
// manifest.json icons array
{
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/icon-maskable-512.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
]
}Icon Design Principles for Small Sizes
At 20×20 or 29×29 pixels, the visual vocabulary of your icon must compress to almost nothing. A few principles help icons survive the extreme size reduction:
- Simple silhouette. The overall shape should be recognisable as a silhouette at 16px. If you cover the colour and detail, can you still identify the icon? If not, simplify.
- High contrast. Low-contrast icons disappear against both light and dark system backgrounds. Ensure your icon foreground has at least 4.5:1 contrast with the background at all sizes.
- Avoid thin lines. Strokes thinner than 2px in the final rendered output become invisible or render as grey aliasing. At 29×29, a 1px stroke in your 1024×1024 source becomes a 0.028px line — it will not render at all.
- No fine text. Text is never readable at icon sizes below 64px. Use a symbol or monogram instead.
- Appropriate padding. iOS clips icons with a rounded-rectangle mask; Android's adaptive icon has a safe zone. Keep your important visual elements within 80-85% of the canvas to ensure nothing critical is clipped.
Common Mistakes That Cause Store Rejections
App store review processes check icons programmatically and visually. The most common reasons for icon-related rejections or quality flags:
- Alpha channel in iOS icons. Apple explicitly requires no transparency. An icon with an alpha channel will fail automated validation in Xcode.
- Wrong dimensions. Off-by-one errors (e.g., 179×179 instead of 180×180) cause immediate rejection. Always verify dimensions programmatically, not visually.
- JPEG artifacts. Icons exported as JPEG (or accidentally saved with JPEG compression inside a .png extension) have visible compression artifacts. Always export as PNG.
- Pre-rounded corners for iOS. Adding your own rounded corners to iOS icons results in double-rounding when the system applies its mask. Submit a square icon and let the OS round it.
- Placeholder or generic icons. Both Apple and Google review for icons that look like placeholder images or are clearly unfinished. A solid colour square or a generic camera icon will be flagged.
Automating Icon Generation in CI/CD
For teams shipping apps continuously, manual icon generation is a liability — someone forgets to update the icons after a rebrand, or checks in the wrong sizes. The right approach is to commit a single master source file and generate all platform icons as part of the build pipeline.
# Using sharp (Node.js) to generate iOS icons from a source PNG
const sharp = require("sharp");
const sizes = [20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180, 1024];
for (const size of sizes) {
await sharp("icon-source-1024.png")
.resize(size, size, { kernel: sharp.kernel.lanczos3 })
.removeAlpha() // iOS requires no alpha channel
.png({ compressionLevel: 9 })
.toFile(`icons/ios/icon-${size}.png`);
}The Lanczos resampling kernel (lanczos3) produces the sharpest results for downscaling photographic and icon content. The default bicubic or bilinear kernels can produce slightly softer results at small sizes. For CI/CD pipelines, tools like sharp (Node.js), Pillow (Python), and ImageMagick all support Lanczos resampling.
Generate All Platform Icons Instantly
The manual approach — resize, name, verify dimensions, repeat 30 times — takes 45 minutes and is error-prone. Tanvrit's App Icon Generator runs entirely in your browser: upload your source image once, select your target platforms, and download a ZIP containing correctly named, correctly sized icons for iOS, Android, macOS, and PWA — ready to drop straight into Xcode, Android Studio, or your public directory. Your image is never uploaded to any server.