Skip to main content

Icon Set Generator

What it does

The Icon Set Generator takes one source image (PNG, JPG, or SVG) and produces every icon variant a typical project needs across every platform it might ship to. Output is a ZIP containing PNGs at the right sizes, each named exactly the way each platform’s build system expects, organised into folders that match where they belong in your project. Web favicons, Chrome and Firefox extensions, iOS app icons (the full AppIcon.appiconset matrix), Android mipmap densities plus adaptive icons, PWA icons including maskable variants, Windows tiles, and Open Graph social images — all in one pass. Manifest and HTML snippets are included for the platforms that need them.

Common situations

You’re starting a new project that ships to multiple surfaces — a web app with PWA support, browser extension, iOS and Android wrappers. Generating icons for each platform separately means four tools, four naming conventions, four sets of trial-and-error. One tool, one source image, one ZIP collapses the entire icon-prep step into a single pass.

You’re rebranding a multi-platform product. The logo changes; everywhere the old logo lives needs a new one. Producing fresh icon sets simultaneously, named the same way as the old ones, means the changes are mechanical drop-ins rather than rebuild work.

You’re shipping an extension to both Chrome and Firefox, and each has its own naming conventions and manifest format. Having both produced in one go saves the awkward “wait, what was the Firefox icon for the toolbar called?” question.

You’re producing an iOS app icon set for App Store submission. Apple requires the full AppIcon.appiconset matrix — about 16 sizes from 20×20 to 1024×1024 with specific filenames. Generating these by hand is error-prone; this tool produces them all with the exact naming Xcode expects.

You’re configuring a PWA where the manifest needs both regular and maskable icon variants. The maskable variant adds 10% safe-zone padding so the icon survives platform cropping into circles or squircles. Having the masked versions generated alongside the standard ones removes a manual cropping step.

What you need to know

The source image is rendered to a fresh canvas at each target size, with the source drawn at the largest scale that fits the chosen fit mode (cover or contain). Maskable PWA icons — the variant that Android may crop into a circle, squircle, or other shape — automatically get extra padding (10% by default) so the visible content stays inside the safe zone regardless of how the platform crops them. Output is always PNG.

Each platform’s folder mirrors where its icons live in a typical project:

  • Web favicons → web/ (drop at site root)
  • PWA → pwa/ (drop at site root, referenced from manifest)
  • Chrome extension → chrome-extension/ (drop in extension root)
  • Firefox extension → firefox-extension/ (similar)
  • iOS → ios/AppIcon.appiconset/ (drag into Xcode’s Assets.xcassets)
  • Android → android/res/ (merge into app/src/main/res/)
  • Windows tile → windows-tile/ (drop at site root)
  • Open Graph → social/ (drop at site root)

The included README documents where each folder belongs in a typical project layout. Customise based on your specific structure.

The ZIP is generated client-side using JSZip — no upload, no server, no privacy concern about the source image. This matters when working with logos under embargo or unreleased brand assets.

Square sources work best. For non-square logos, switch to Contain fit mode and pick a brand background colour. Cover mode crops; contain mode frames.

iOS app icons should not have transparency. The generated PNGs include opaque backgrounds where the source had transparency, but if your source is partially transparent over a complex shape, results are unpredictable. Use a flattened, opaque source for iOS work.

The included .ico is not generated — modern browsers do not need it, and the bundled README has a one-line ImageMagick command for the rare case it is required.

Frequently asked questions

What sizes do I need for a complete icon set?

Web: 16, 32, 48, 192, 512 plus 180 for Apple Touch. iOS: full matrix from 20 to 1024 (~16 sizes). Android: 48, 72, 96, 144, 192 plus 512 for Play Store. PWA: 192 and 512 (regular and maskable). Windows: 70, 150, 310. Open Graph: 1200×630.

Do I still need favicon.ico in 2026?

Generally no. Modern browsers prefer <link rel="icon" type="image/png"> and accept any size. Legacy systems (very old Outlook versions, ancient corporate proxies) sometimes still expect .ico. Generate one via ImageMagick if needed.

What’s a maskable icon?

A PWA icon variant with 10% safe-zone padding so the platform (Android launcher, iOS home screen) can crop into a circle, squircle, or other shape without losing the visible logo. Specify with purpose: "maskable" in the manifest’s icons array.

Why do iOS app icons need so many sizes?

Apple’s design system uses specific sizes for specific contexts — settings, notifications, Spotlight, Home Screen across iPhone and iPad, plus the App Store. Each context has its own size at 1×, 2×, and 3× scale factors, totalling 16+ variants.

Should I use SVG as the source?

If available, yes — vector input rasterises crisply at every size. PNG sources work but produce softer output at sizes larger than the source resolution.

Can I use this for Electron or desktop apps?

Partially. The web and Windows tile icons cover much of what Electron apps need. For native macOS .icns files, use a dedicated tool — .icns is a multi-resolution binary container that this tool does not produce.

What about Apple Watch?

Not currently in the output set. Apple Watch icons follow the iOS conventions but at smaller sizes (24, 27.5, 29, 40, 44, 50, 86, 98, 108). For watch apps, generate the iOS set and resize down to watch sizes manually.

Does the generator strip transparency for iOS?

It fills transparent regions with the chosen background colour. For App Store-compliant icons (which require opaque backgrounds), set the background colour to match your brand and use cover or contain fit mode. The output will be fully opaque.

Common problems

Problem: iOS app icon submitted to App Store rejected for “transparency”.

Apple requires opaque app icons. Even partially transparent regions are rejected. Set a background colour in the generator and use cover fit mode to ensure full opacity.

Problem: Android adaptive icon shows the logo cropped weirdly.

Adaptive icons are cropped to platform-specific shapes (circle, squircle, square depending on launcher). Use the maskable variant — it adds 10% safe-zone padding so the visible logo survives any crop.

Problem: PWA installed on mobile but the home-screen icon is wrong.

Check the manifest’s icons array. Each icon needs src, sizes, type, and ideally purpose. The generator’s README includes a manifest snippet — paste it, adjust paths if your folder structure differs.

Problem: Chrome extension icons appear pixelated in the toolbar.

Toolbar icons (16 and 32) need to be very crisp. Vector source (SVG) produces the cleanest output at these small sizes. PNG sources need to be at least 32 pixels at the source resolution, ideally larger.

Problem: Open Graph image shows up cropped on Twitter but fine on Facebook.

Twitter prefers different aspect ratios for different card types. The generated 1200×630 (1.91:1) works for summary_large_image but Twitter may crop other card types. Generate platform-specific OG variants if Twitter cropping matters.

Quick guides

For React / Next.js: Drop the web/ folder contents into your public/ directory. Reference favicons via <link> tags in <Head>. PWA: paste the manifest snippet into a manifest.webmanifest file at public/manifest.webmanifest.

For iOS in Xcode: Drag the ios/AppIcon.appiconset folder into the project’s Assets.xcassets. Xcode automatically wires up the icons; no further config needed.

For Android (Gradle project): Merge the android/res/ directory into app/src/main/res/. Each mipmap-* subfolder corresponds to a screen density. Update android:icon in AndroidManifest.xml to @mipmap/ic_launcher.

Tips

  • Square logos work best across the board. For non-square marks, switch to Contain fit mode and pick a brand background colour rather than letting Cover crop the visible content.
  • iOS app icons should not have transparency. The generated PNGs include opaque background where the source had transparency, but if your source is partially transparent over a complex shape, results are unpredictable — use a flattened source for iOS work.
  • The maskable PWA variants are the safety net for Android home-screen integration. Some launchers crop aggressively; the maskable padding ensures the visible portion of the logo survives the most aggressive crops.
  • The included .ico is not generated — modern browsers do not need it, and the bundled README has a one-line ImageMagick command for the rare case it is required.
  • The output is naming-convention-correct, but project file layouts vary. The README points each folder at a typical location; integrate where appropriate for your codebase.
  • Use SVG as source where possible — vector data rasterises crisply at every output size. PNG sources need to be at least as large as your largest output (1024 for iOS App Store).
  • For multi-tenant SaaS where each customer uploads their own logo, automate this in your build pipeline rather than running the generator manually.

Related tools in this suite

The natural pairing is the Favicon Generator in the design suite — covering web favicons specifically, with simpler scope and tighter focus when you only need browser-tab icons. The Mock JSON Generator is useful in the same project-bootstrapping moment when you need both icons and starter test data.

Take it further

Icon generation at the start of a project is a one-off task. Icon consistency across the project’s lifetime is a system concern — when the brand evolves, when new platforms get added, when a team member ships a feature with a one-off icon that drifts from the documented set. The systems we build absorb that into the build pipeline so the source-of-truth logo file feeds every variant automatically; rebrands become single-source changes rather than multi-tool ones.