Skip to Content
Documents📦 Platform & Output📐 Design Guidelines

Design Guidelines

Each platform has its own rules for icon shape, safe zones, and visual weight. Following these guidelines helps your app look native and professional.

iOS

  • Shape: Superellipse (Squircle). Enable Squircle in Zapicon.
  • Size range: 20×20 @2x/@3x up to 1024×1024 @1x.
  • Safe zone: Keep the main subject inside a roughly 66% central area.
  • Background: Avoid transparency; iOS fills the full icon area.
  • Style: Simple, centered, no text if possible.

Android

  • Shape: Adaptive icons are masked by the device. The foreground layer should not touch the edges.
  • Size range: 48×48 mdpi up to 192×192 xxxhdpi.
  • Safe zone: Keep critical content inside a 66% diameter circle.
  • Layers: Zapicon exports a foreground PNG. Combine it with a background layer in your Android project if you use adaptive icons.
  • Style: Material Design favors bold shapes and clear silhouettes.

macOS

  • Shape: Rounded rectangle, not as extreme as iOS Squircle.
  • Size range: 16×16 @1x/@2x up to 512×512 @1x/@2x.
  • Style: Richer detail is acceptable at larger sizes because the Dock and Finder show icons up to 512 px.
  • ICNS: Zapicon generates the ICNS file automatically.

Windows

  • Shape: Square or transparent background; Windows applies its own mask for UWP but not for Win32.
  • Size range: 16×16 up to 256×256 in a single ICO file.
  • Style: Keep the design readable down to 16×16 px in the taskbar and title bar.
  • ICO: Zapicon embeds all standard sizes in the ICO file.

Web

  • Favicon: 16×16, 32×32, or SVG. Zapicon exports a multi-size ICO.
  • Apple touch icon: 180×180 PNG for iOS home screen bookmarks.
  • PWA icons: 192×192 and 512×512 PNGs with transparent or solid backgrounds.
  • Style: Favicons must remain clear at 16×16 px.

Tauri

Select the Tauri platform to export a complete set, then copy the icons into your project’s icon folder.

Flutter

Select the Flutter platform to export both Android and iOS assets in one go. Android adaptive icon backgrounds still need to be configured separately in your Flutter project.

Using design guides in Zapicon

Toggle Design Guides in the editor to overlay:

  • Apple icon grid
  • Android adaptive icon grid
  • Windows Fluent icon grid
  • Golden ratio spiral
  • Pixel grid

These overlays help you verify alignment without leaving the editor.

Last updated
📦 Batch Export🎨 AI and Icon Design