Generador de Iconos de App

Mobile operating systems display app icons in many different contexts: the home screen, the app switcher, settings, notifications, the App Store/Play Store listing, and search results. Each context requires a different pixel dimension. iOS alone requires over 20 different icon sizes for a complete submission -- from 20×20 (notification on iPad) to 1024×1024 (App Store listing). Android uses adaptive icons that must be 108×108 with a 72×72 safe zone, plus legacy icons at multiple densities (mdpi: 48×48, hdpi: 72×72, xhdpi: 96×96, xxhdpi: 144×144, xxxhdpi: 192×192).

Creating each size manually in an image editor is tedious and error-prone. A source image that looks good at 1024×1024 might lose important detail when scaled to 29×29. The key is starting with a simple, bold design that works at all sizes -- avoid thin lines, small text, and intricate details that will disappear at small sizes. The source image should be at least 1024×1024 pixels (for iOS) or 512×512 pixels (for Android), in PNG format with no transparency (iOS doesn't allow transparent app icons).

For web applications (PWA), the requirements are simpler but still important. The manifest.json file references icons at 192×192 and 512×512, but additional sizes improve the experience when users add your site to their home screen. Apple Touch Icons (apple-touch-icon) should be 180×180 for the best quality on iOS devices. Favicon files should include 16×16, 32×32, and 180×180 sizes.

The tool uses the Canvas API to resize the source image to each required dimension. The source image is loaded into an Image object, then for each target size, a canvas is created at that dimension and the image is drawn using ctx.drawImage() with high-quality resampling (imageSmoothingQuality = 'high'). Each canvas is then exported as a PNG blob and packaged for download.

For iOS, the tool generates an icon set following Apple's naming convention (Icon-App-20x20@1x.png, Icon-App-20x20@2x.png, etc.) and can optionally create a Contents.json file for use in Xcode asset catalogs. For Android, the tool generates icons in the correct directory structure (mipmap-mdpi/, mipmap-hdpi/, etc.) for direct inclusion in the project's res/ folder. For web, it generates a favicon set and the necessary HTML meta tags.