PixelDevToolsAsset & Graphic Studio
App & Mobile IconsEssential

Universal App Icon & Favicon Studio

Drop one high-res icon and generate all required icon dimensions for iOS (App Store, Home, Spotlight, Settings), Android (Adaptive Icon with safe-zone guides and mipmap folders), PWA, and web favicons with manifest.json.

1. Upload Source ImageRecommended: 1024x1024
Inner Padding (10%)10%

Generates 24+ files across iOS, Android & Web Favicon specs in 1 second.

HTML <head> Snippet
<!-- Favicon & Mobile Meta Tags (PixelDevTools) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Live Device & Mask Previews

iOS Squircle
1024x1024 App Store
Android Circle
Adaptive Safe Zone
Browser Tab
PixelDevTools
16x16 / 32x32 Favicon
ZIP Package Contents:
📁 ios/
• 1024x1024 (App Store)
• 180x180 (iPhone 3x)
• 120x120 (iPhone 2x)
• 87, 80, 76, 58, 40...
📁 android/
• mipmap-xxxhdpi (192)
• mipmap-xxhdpi (144)
• mipmap-xhdpi (96)
• playstore-512.png
📁 web-favicon/
• favicon-16x16, 32x32
• apple-touch-icon (180)
• android-chrome (192, 512)
• site.webmanifest
Sponsored
Technical Documentation & Specification

Mobile App Icon Matrices & Platform Guidelines

Engineering specifications for iOS App Store, Android Adaptive Icons, and Web Manifests.

Architecture Overview

Deploying native applications across mobile and desktop platforms requires adherence to strict operating system icon specifications. Operating systems enforce different masking algorithms, resolution scaling buckets, and color profile requirements. This utility rasterizes a master asset across all required device buckets client-side via HTML5 Canvas.

Core Mechanics & Implementation Details

Apple Human Interface Guidelines (HIG) Standards

iOS icons must be provided as square, flat PNG images without pre-rounded corners. Apple SpringBoard automatically applies a continuous curvature squircle mask (22.5% corner radius). Crucially, iOS App Store marketing icons (1024x1024) must be strictly opaque with no alpha transparency channel; transparent pixels will cause App Store Connect ingestion rejection.

Android Adaptive Icons Architecture (API 26+)

Android Adaptive Icons consist of a 108dp x 108dp canvas divided into two distinct layers: a foreground asset and a background color/drawable. Only the inner 72dp diameter circular area is guaranteed to be visible (the safe zone). The remaining outer 18dp is reserved for OEM dynamic masking (circle, rounded square, squircle, teardrop) and launcher parallax motion effects.

Web App Manifest & Multi-Resolution Favicon Strategy

Modern browsers utilize a multi-resolution favicon fallback strategy. A 32x32 PNG serves standard desktop tabs, a 180x180 PNG serves iOS Safari home screen bookmarks (apple-touch-icon), and 192x192 / 512x512 icons populate the Progressive Web App (PWA) installation prompt defined in site.webmanifest.

Engineering Specifications

ParameterStandard / ValueEngineering Scope
iOS Master Canvas1024x1024 px @ 72/144 DPIBase asset for App Store distribution
iOS Scale Buckets@1x, @2x, @3x DensitiesSizes: 20px, 29px, 40px, 58px, 60px, 76px, 80px, 87px, 120px, 152px, 167px, 180px
Android Densitiesmdpi to xxxhdpi48px (1x), 72px (1.5x), 96px (2x), 144px (3x), 192px (4x)
Color SpacesRGB / Display P3Standard 8-bit per channel RGB color model
Archive PackagingJSZip Client-Side StreamIn-memory compression without server upload

Recommended Best Practices

  • •Maintain critical brand graphics inside the 72dp safe zone circle to prevent Android OEM clipping.
  • •Ensure the 1024x1024 master icon has an opaque background before submitting to App Store Connect.
  • •Set an appropriate theme-color meta tag matching your icon background for seamless mobile browser navigation bars.
  • •Verify favicon visibility against both dark (#000000) and light (#ffffff) browser tab backgrounds.

Common Pitfalls & Anti-Patterns

  • •Pre-rounding icon corners for iOS results in black corner artifacts when the OS applies its native mask.
  • •Using text or intricate details that become illegible at 16x16 or 20x20 pixel resolutions.
  • •Placing vital logo elements outside the 72dp safe zone on Android devices.
HTML5 Header Favicon & Web Manifest Standard
<!-- Critical Favicon and Apple Touch Tags -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#09090b">

Key Capabilities & Highlights

iOS App Store & device sizes (20px up to 1024px)
Android Adaptive Icon preview with safe-zone guidelines
Web Favicon package (16x16, 32x32, 48x48, 180x180, 192x192, 512x512)
site.webmanifest and HTML <head> snippets
Adjustable background padding and canvas color
Single-click ZIP download of all generated asset directories

Explore More Developer Utilities

View all tools
Vector & SVGPopular

SVG to Code Studio

Convert SVGs into clean React (JSX/TSX), Vue 3, Flutter, React Native, SwiftUI components and CSS Data URIs.

Open tool
Social & Code MockupTrending

Terminal & Code Screenshot Styler

Transform code snippets, bash logs, and SQL into stunning social media cards with macOS window frames and gradients.

Open tool
Web PerformanceSecurity

EXIF & GPS Metadata Sanitizer

Inspect and purge hidden EXIF markers, GPS coordinates, device serial numbers, and camera metadata before publishing.

Open tool