Skip to content
PPureDevKit

Documentation · Updated 2026-08-31

App Icon Studio

Design and export iOS, Android, and PWA icon packs — with promo badges, marketing frames, and batch variants. Everything runs in your browser.

Open App Icon StudioiOS presetAndroid preset

Getting started

Overview

App Icon Studio is a full-page editor. You upload one logo (or type a monogram), tune the design, preview it on phone mockups, and download a ZIP with every size Xcode, Android Studio, and PWAs need.

When to use

Use it when shipping a new app, refreshing store icons, running a seasonal promo, or white-labeling the same design for multiple app names.

Steps

  1. 1Open /tools/app-icon-generator/ (or an alias like /tools/ios-app-icon-generator/).
  2. 2Upload artwork or enter a monogram in the left sidebar.
  3. 3Adjust layout, background, and optional promo badge.
  4. 4Check the Live preview panel on the right.
  5. 5Click Download ZIP in the top bar.

Tips

  • Drop a file anywhere on the page — you do not have to click Upload first.
  • Your session auto-saves to localStorage. Use New in the header to start fresh.

Editor layout

The workspace has three columns on desktop: controls (left), canvas (center), and live device previews (right). On mobile, sections stack vertically.

When to use

Refer to this when you are looking for a specific control or preview and cannot find it.

Steps

  1. 1Left sidebar — app name, monogram, layout, backgrounds, badges, batch variants, validation, and export buttons.
  2. 2Center — icon canvas. Drag to reposition logo or badge depending on the mode toggle above the canvas.
  3. 3Right panel — Live preview with iOS, Android, and Web tabs plus store/home mockups.
  4. 4Top bar — Back, Docs, New, Share, Upload, and Download ZIP.

Upload logo or monogram

Start with a PNG, JPG, WebP, or SVG file — or skip the upload and type one or two letters for a text-based icon.

When to use

Upload when you have brand artwork. Use monogram mode for MVPs, internal tools, or placeholder icons before final creative is ready.

Steps

  1. 1Click Upload in the header, tap Upload logo in the sidebar, or drop a file on the page.
  2. 2Supported formats: PNG, JPG, WebP, SVG.
  3. 3Without an image: type 1–2 letters in the Monogram field.
  4. 4Adjust Letter size, Letter weight (500/600/700), and Letter color for monograms.
  5. 5The app name field updates from your filename or monogram automatically.

Tips

  • Square or near-square logos work best. Very wide logos may need extra padding.
  • SVG rasterizes at export time — no server upload.

Design controls

Padding, scale & position

Control how much of the icon square your logo fills and where it sits inside the safe area.

When to use

Use when your logo feels too large, too small, or off-center after upload.

Steps

  1. 1Padding — slider in Layout. Increases inset around the logo (0–35%).
  2. 2Scale — zooms artwork without changing padding.
  3. 3Drag the canvas to reposition (Move logo mode).
  4. 4Use arrow keys for 1px nudges; hold Shift for larger steps.
  5. 5Click Reset position when offsetX/offsetY drift too far.
  6. 6Enable Safe zone guide to see iOS squircle or Android circle mask while editing.

Tips

  • Keep important logo details inside the safe zone — corners get clipped on iOS squircles and Android circles.

Backgrounds & gradients

Pick from eight presets or set custom start/end colors. Gradients can be toggled off for flat fills.

When to use

Use when your logo is transparent, monochrome, or needs a branded backdrop behind it.

Steps

  1. 1Scroll to Background in the left sidebar.
  2. 2Click a preset swatch (Indigo, Ocean, Sunset, Forest, etc.).
  3. 3Toggle Gradient off for a solid fill using the start color.
  4. 4Use Start color and End color pickers for custom brand colors.

Colors from your logo

After uploading a logo, up to four gradient suggestions appear under From your logo. Colors are sampled from your image locally — pixel math only, nothing is sent anywhere.

When to use

Use when you want a background that matches your brand mark without manually eyedropping hex values.

Steps

  1. 1Upload a logo first — the From your logo row appears below presets.
  2. 2Click Logo, Logo duo, Logo soft, or Logo vivid to apply.
  3. 3Fine-tune with the color pickers if needed.

Reference

  • This is not AI — it is simple dominant-color sampling in the browser.

Preview shape

The center canvas mask shows how the icon will look on each platform.

When to use

Switch masks while editing to check clipping on iOS vs Android vs PWA.

Steps

  1. 1Open Preview shape in the sidebar.
  2. 2iOS — squircle (App Store shape).
  3. 3Android — circle (adaptive icon mask).
  4. 4Web — rounded square (typical PWA).
  5. 5Square — full bleed, no corner clipping.

Promo badges

Enable & pick a preset

Overlay seasonal or sale labels on your icon — Happy New Year, Christmas, SALE, 50% OFF, Black Friday, and more.

When to use

Use for App Store / Play Store seasonal updates, limited-time promos, or holiday marketing icons.

Steps

  1. 1Toggle Promo badge on in the sidebar.
  2. 2Click a preset swatch (Sale, Happy NY, Diwali, etc.).
  3. 3Edit Badge text to customize the label.
  4. 4Adjust Badge size and Rotation sliders as needed.

Position the badge

Place the badge anywhere on the icon without it getting cut off on export.

When to use

Use after picking a preset — default positions may need adjustment for long text like Happy Diwali.

Steps

  1. 1Above the canvas, switch to Move badge (Move logo / Move badge toggle).
  2. 2Drag the badge to the desired spot — it follows your pointer smoothly.
  3. 3Use arrow keys to nudge; Shift + arrow for bigger steps.
  4. 4Click a corner shortcut: Top left, Top right, Bottom left, Bottom right.
  5. 5Click Reset badge position to restore defaults.

Tips

  • Corner buttons compute position from the badge size so nothing clips at the edge.
  • Long text badges need more inset — use corner snap rather than manual edge placement.

Live preview

iOS preview

See your icon on an iPhone home screen and App Store listing mockup.

When to use

Check icon legibility against wallpaper and beside system apps before submitting to App Store Connect.

Steps

  1. 1Open the Live preview panel (right column).
  2. 2Select the iOS tab.
  3. 3Toggle Home Screen vs App Store.
  4. 4Home Screen shows your icon in a grid with realistic spacing.
  5. 5App Store shows the 1024-scale listing tile with app name.

Android preview

Preview home screen, adaptive layers, Play Store, and themed monochrome icon.

When to use

Use Layers mode to verify foreground/background split for adaptive icons. Use Themed for Material You monochrome.

Steps

  1. 1Select the Android tab in Live preview.
  2. 2Home — circular icons on a Pixel-style home screen.
  3. 3Layers — foreground, background, and combined adaptive preview.
  4. 4Play Store — listing tile mockup.
  5. 5Themed — monochrome layer preview for Android 13+ themed icons.

Web / PWA preview

Browser install prompt mockup showing your PWA icon in context.

When to use

Use when shipping a Progressive Web App and want to see the install chip appearance.

Steps

  1. 1Select the Web tab in Live preview.
  2. 2Review the icon in a browser chrome mockup with install CTA.

Validation warnings

Automatic checks for contrast, safe-zone overflow, and common export issues.

When to use

Glance before export — especially if you disabled safe zone guides during editing.

Steps

  1. 1Scroll to the validation panel in the left sidebar.
  2. 2Read any warnings listed.
  3. 3Adjust padding, scale, or badge position if your logo is clipping.

Reference

  • Promo badges intentionally sit near edges — some warnings are expected when using badges.

Export

Download ZIP

One click exports the full icon pack for iOS, Android, web, macOS, watchOS, marketing frames, and framework configs.

When to use

This is the primary export for shipping an app. Use quick export only when you need a single PNG.

Steps

  1. 1Finish your design and check Live preview.
  2. 2Click Download ZIP in the header.
  3. 3Unzip locally. Read README.md at the root for folder explanations.
  4. 4Drop ios/AppIcon.appiconset into Xcode Assets.
  5. 5Copy android/res/* into your Android project res folder.
  6. 6Copy web/* icons to your public folder for PWAs.

Reference

  • ios/ — AppIcon.appiconset with Contents.json.
  • android/res/mipmap-*/ — adaptive fg/bg/mono + legacy PNGs per density.
  • android/play-store/icon-512.png — Play Console upload.
  • web/ — favicon.ico, 192/512 PNGs, manifest.icons.json, head.html snippet.
  • marketing/ — store phone screenshots and promo banner.
  • frameworks/ — Expo, Flutter, Capacitor, Cordova snippets.
  • variants/ — present only when batch variants are configured.

Quick export PNGs

Download individual PNGs without the full ZIP — App Store 1024, Play 512, PWA 512/192.

When to use

Use for a single store submission asset or quick share without unzipping a full pack.

Steps

  1. 1Scroll to Quick export in the left sidebar.
  2. 2Click the size you need.
  3. 3The PNG downloads immediately to your device.

Store marketing frames

Phone screenshot frames and a wide promo banner for store listings, social, or landing pages.

When to use

Use when you need marketing visuals beyond the raw icon — included in ZIP under marketing/ too.

Steps

  1. 1Scroll to Store marketing in the sidebar.
  2. 2Click iOS store phone (1290×2796), Android store phone (1080×1920), or Promo banner (1024×500).
  3. 3Or find the same files in marketing/ inside the ZIP.

Batch variants

Export one design as multiple complete icon packs — different app names or promo badge labels — in a single ZIP.

When to use

White-label apps, seasonal promo variants (Sale vs New Year), or multiple SKUs from one template.

Steps

  1. 1Design your base icon in the main editor.
  2. 2Scroll to Batch variants and click Add variant.
  3. 3Enter App name and optional Badge text for each extra variant.
  4. 4Click Download ZIP — root pack uses the main App name; extras land in variants/<name>/.

Reference

  • Each variant folder is a full pack (icons + marketing), not just one PNG.
  • Framework configs appear only in the root pack to avoid duplication.
  • Badge text override enables the badge and replaces the label for that variant only.

Workflows & reference

iOS workflow

From export to Xcode App Store submission.

When to use

After downloading the ZIP for an iOS or cross-platform app.

Steps

  1. 1Unzip and open ios/AppIcon.appiconset in Finder.
  2. 2In Xcode, open Assets.xcassets → drag the appiconset in (replace existing).
  3. 3Target → General → confirm App Icons Source points to the set.
  4. 4Archive and upload — App Store Connect uses the 1024×1024 marketing icon from the set.

Android workflow

From export to Android Studio and Play Console.

When to use

After downloading the ZIP for an Android or cross-platform app.

Steps

  1. 1Copy android/res/* into app/src/main/res/.
  2. 2Confirm AndroidManifest.xml references @mipmap/ic_launcher.
  3. 3Upload android/play-store/icon-512.png to Play Console listing.
  4. 4Use Layers preview during design to verify adaptive foreground/background split.

PWA workflow

Web icons and manifest entries for installable PWAs.

When to use

When adding install support to a web app.

Steps

  1. 1Copy web/icon-192.png and web/icon-512.png to your public folder.
  2. 2Add web/favicon.ico and smaller PNGs for browser tabs.
  3. 3Paste entries from web/manifest.icons.json into your manifest.json.
  4. 4Optional: use web/head.html link tags in your HTML head.
  5. 5Pair with the PWA Manifest builder tool for a full manifest.json.

Share link

Copy a URL that encodes your editor settings so collaborators can open the same configuration.

When to use

Share design settings with a teammate — they may need to re-upload the logo on another device.

Steps

  1. 1Click Share in the header.
  2. 2Link is copied to clipboard.
  3. 3When possible, a small JPEG thumbnail of the icon is embedded in the URL.
  4. 4If the link is settings-only, re-upload the same logo after opening.

URL aliases

SEO-friendly entry points that open the same editor with a platform preset.

When to use

Bookmark or link directly to the platform you are targeting.

Steps

  1. 1/tools/app-icon-generator/ — default editor.
  2. 2/tools/ios-app-icon-generator/ — iOS preview selected.
  3. 3/tools/android-adaptive-icon-generator/ — Android layers preview.
  4. 4/tools/pwa-icon-generator/ — Web preview selected.

Privacy

All rendering and export happen locally in your browser tab.

When to use

Reference for security reviews or client questions about data handling.

Steps

  1. 1Logo files are not uploaded to a server.
  2. 2Color sampling, badge rendering, and ZIP creation run on your device.
  3. 3Share links encode settings in the URL hash — not stored on our servers.
  4. 4Session data lives in localStorage until you click New or clear site data.

Related tools

App icons

Design and export iOS, Android adaptive, and PWA icon packs in your browser.

Web manifest

Build a web app manifest.json with icons placeholders.

Identicon

SHA-256 identicon PNG from a seed, drawn on canvas.

Placeholder

PNG/JPEG/WebP placeholders at any size, in-browser.

Resize

Resize a local image with canvas. PNG, JPEG, or WebP out.