Design Asset Sizes
Design assets often have to ship at a single canonical size — an icon set, a profile picture, a thumbnail, a wallpaper — because platforms and frameworks reject anything off-spec. This catalog covers the canonical sizes for every major design context, plus AI-powered upscaling (Real-ESRGAN) and background removal (U²-Net) that run entirely in your browser.
Wrong-size design deliverables get rejected at the platform's intake step — App Store Connect, Play Console, the brand-portal of whatever platform you're shipping for. Each platform's icon, profile, or hero image system expects a specific pixel count, format, and (sometimes) bit depth. Hitting the spec exactly the first time saves the round-trip through review, which on iOS can be a 24-hour wait.
How to choose the right preset
- Pick the platform / context. Icon size depends on where it ships — iOS (1024×1024 source), Android (108-dp adaptive), Slack (512×512), Discord (256×256). The card subtitle calls out the platform.
- Use multi-size bundles where the spec demands it. Favicon (.ico, 16/32/48), iOS app icon (multi-size), and PWA icons need multiple sizes packaged together. The preset cards labelled 'multi-size' generate these in one pass.
- Pick AI upscaling when the source is undersized. If you only have a 256×256 logo and the spec needs 1024×1024, bicubic upscaling produces a blurry result. Real-ESRGAN reconstructs detail rather than just stretching pixels — the upscale presets cover 2× and 4× at photo and anime models.
- Use background removal for transparent deliverables. Product shots, profile pictures, and design comps often need a transparent background. The bg-remove preset uses U²-Net, which preserves hair and soft edges better than chroma-key approaches.
- Plan retina / HiDPI variants. Most platforms now serve assets at 2× on Retina displays. Generate the 2× version (e.g. 2048×2048 instead of 1024×1024) for any asset that will appear on modern phone or laptop screens.
Every Design Assets preset
All 36 recipes in this category. Click any card to land in chat with the recipe pre-loaded — drop an image to run.
Common mistakes
- Generating only the largest size — browsers and operating systems pick the smallest size that fits the context. Without intermediate sizes, the system downsamples on the fly and the result looks blurry.
- Submitting a JPEG when transparency is required — JPEG can't store alpha. Use PNG for icons, logos, and any asset destined for a colour background you don't control.
- Using AI upscaling on an already-upscaled file — the model is trained on natural source content; running it on processed output invents texture rather than reconstructing it.
- Forgetting that platforms (Slack, Discord, App Store) re-encode uploaded icons through their own pipeline — colour shifts and small softening are normal even when your source is pristine.
- Burning anti-aliased edges into a coloured background — render your source on transparent first so the icon edges blend cleanly on whatever surface it lands on.
- Picking the wrong upscale model — the photo model softens anime/illustration line art; the anime model leaves photo skin texture chunky. Match the model to the source content type.
Frequently asked questions
How does AI upscaling differ from bicubic?
Bicubic resampling estimates a new pixel from a 4×4 grid of nearby pixels — it stretches existing detail without inventing new detail. Real-ESRGAN runs a neural-network model trained on natural source content; it reconstructs plausible high-frequency detail from the low-resolution input. The result is sharper, but it's an estimate — the model imagines what the detail might have looked like.
Which upscale model should I pick?
Photo for natural photographic content (people, products, landscapes), anime for illustration / line art / cel-shaded content. Running photo on anime softens line art; running anime on photo leaves skin texture chunky. The card title indicates the model.
Does the AI model run on my device?
Yes. Real-ESRGAN (~30 MB quantised) and U²-Net (~5 MB) both run via WebGPU where supported and WebAssembly otherwise. The model weights download on first use and are cached by the service worker. The source image never leaves your browser.
What's the largest source file the upscaler can handle?
Memory-bound rather than file-size-bound. A 2048×2048 source upscaled 4× produces 8192×8192 output, which on a 4 GB-RAM phone can OOM. For very large sources, run the upscale on tiles and composite — or start with a smaller source.
Why does the favicon preset bundle three sizes?
16×16 is the address-bar favicon, 32×32 is the bookmarks icon and the Windows taskbar, 48×48 is the high-DPI desktop tab. Browsers pick the size that fits the context; without intermediate sizes the system downsamples on the fly and renders blurry.
How private is the processing?
Every preset runs in your browser — Real-ESRGAN, U²-Net, and the simpler resize/crop presets all use canvas APIs and WebAssembly with no upload. Brand assets, unreleased product shots, and IP-sensitive content stay on your device.