User Rating 0.0
Total Usage 2 times
Upload Master Icon Rec: 1024x1024 PNG/SVG
MyApp
Phone
Mail
Podcasts

iPhone 14 Home Screen (Auto-squared corners)

MyApp
Gmail
Maps
Photos

Android Adaptive Icon (Circle Mask)

example.com
My PWA Title ×
New Tab
Add to Home Screen Install this app on your device?

Browser Tab & PWA Install Prompt

Is this tool helpful?

Your feedback helps us improve.

About

In professional application development, asset generation is often the final bottleneck. A single missing resolution can degrade the user experience on specific devices or negatively impact App Store Optimization (ASO) scores. This tool functions as a complete client-side build pipeline, transforming a single master file into a comprehensive suite of over 60 distinct assets required by Apple, Google, and Microsoft ecosystems.

Unlike basic resizers, this engine respects platform-specific rendering rules. It calculates Safe Zones for Android Adaptive Icons to prevent logo clipping, generates strict sRGB color profiles for consistent reproduction, and automatically constructs the metadata files (manifest.json, browserconfig.xml) needed for Progressive Web Apps. The processing utilizes high-precision Lanczos-3 resampling to maintain edge clarity even at the smallest 16×16 favicon dimensions.

pwa builder ios assets android adaptive icons favicon generator watchos icons

Formulas

For Android Adaptive Icons, the system must ensure the logo remains within the Safe Zone. The visible viewport v is a subset of the full asset A.

{
Dasset = 108 dp × densityDsafe = 72 dp × density

This implies that critical visual content must be contained within the central circle of diameter d where d 0.66 w. The generator applies a visual mask mask(r) to the preview canvas to simulate system cropping:

pixelout = {
pixelin if (x2 + y2) rTRANSPARENT otherwise

Reference Data

PlatformTarget ContextResolution (px)Req. Format
iOS (Mobile)App Store Main1024×1024PNG (No Alpha)
iOS (Mobile)iPhone Notifications40×40 / 60×60PNG
iOS (iPad)iPad Pro Home167×167PNG
watchOSApple Watch Series 5+196×196PNG
macOSDock / Finder1024×1024 down to 16PNG / ICNS
AndroidPlay Store512×512PNG
AndroidAdaptive Foreground432×432PNG (Center 66%)
AndroidLegacy Launcher192×192PNG
PWA / WebSplash Screen512×512PNG
PWA / WebMaskable Icon192×192PNG (Safe Zone)
WindowsTile Medium150×150PNG
StandardFavicon32×32PNG / ICO

Frequently Asked Questions

Modern Android and PWA standards use "Maskable Icons". This means the system (not the developer) decides whether to display your icon as a circle, a rounded square, or a teardrop. The "Safe Zone" is the center 66% of the image. This tool provides a "Safe Zone Overlay" in the preview to help you ensure your logo isn't cut off when the device applies a circular mask.
Downscaling (making an image smaller) retains quality, while upscaling (making it larger) destroys it. Since the Apple App Store requires a 1024×1024 asset, we use that as the master source to generate all 60+ smaller variations without pixelation.
Yes. After generating, the tool provides a "Copy Code" block containing all necessary <link rel='icon'>, <link rel='apple-touch-icon'>, and <meta> tags, along with the content for manifest.json.
iOS ignores transparency and renders it as black. This tool detects if you are targeting iOS and allows you to "Fill Background" with a solid color (white or brand color) specifically for those assets, while keeping the Web/Android versions transparent if desired.
No. This tool uses the HTML5 Canvas API and web workers. All image processing, resizing, and zip packing happens locally in your browser memory. Your assets never leave your device.