App Icon Generator for Web & Mobile PWAs

Deploying a Progressive Web App (PWA) or responsive web application requires a complete suite of application icons. Different operating systems and device manufacturers have distinct specifications for home screen shortcuts, splash loading screens, and task switchers. If your web app provides only a basic favicon, mobile operating systems display generic default badges that diminish user trust.

The preset on this page configures the Favicon Generator to produce every application icon required by modern iOS and Android standards. In addition to standard home screen icons, it synthesizes an Android maskable icon with verified safe-zone padding and builds a valid W3C site.webmanifest configuration file.

Complete app icon asset breakdown

Our engine generates the complete icon specification from a single high-resolution source image:

1. Apple Touch Icon (apple-touch-icon.png, 180×180): High-density home screen bookmark icon for Safari on iPhone, iPad, and iPod touch.
2. Android Chrome Icon (android-chrome-192.png, 192×192): Standard Android home screen shortcut icon for Google Chrome and Chromium-based mobile browsers.
3. Android Splash Icon (android-chrome-512.png, 512×512): Displayed on full-screen splash screens while a Progressive Web App initializes its service worker and caches.
4. Android Maskable Icon (maskable-icon-512.png, 512×512): Engineered with a minimum 10% outer safe-zone margin (central 80% circle) so adaptive Android launchers can apply circles, squircles, or rounded squares without chopping off your logo.
5. Web App Manifest (site.webmanifest): A pre-configured JSON configuration linking your app name, brand theme colors, standalone display mode, and icon resolutions.

What is a maskable icon and why is it essential?

Starting in Android 8.0 Oreo, Google introduced adaptive icon shapes. Instead of displaying icons as arbitrary cutouts on the home screen, each Android device manufacturer applies a uniform mask shape across all application icons. Google Pixel devices use circular masks, Samsung Galaxy devices use rounded squares, and other manufacturers use squircles or teardrops.

If you provide a standard full-bleed icon as your PWA launcher icon, Android will forcefully clip the edges, cutting off corners of your mark or cropping out typography.

A maskable icon solves this problem by ensuring that all important graphics reside inside a safe zone—defined as a circle centered on the canvas with a radius equal to 40% of the canvas size (an 80% diameter). Our generator automatically calculates and applies this safe-zone padding to maskable-icon-512.png, guaranteeing that your icon looks pristine across every Android phone on the market.

How to install the PWA icon kit

After downloading the generated ZIP archive:

1. Extract all icon PNG files and site.webmanifest into your website’s public root folder (e.g., /public/).
2. Add the generated HTML snippet to the <head> of your website:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Your web application will now pass Google Lighthouse PWA audits and offer a polished, native-like installation experience on both Android and iOS devices.

Private, local execution

Unreleased mobile application logos, proprietary startup branding, and client designs should remain confidential until launch. Typical online icon generators transmit your graphics to remote server clusters where files may be stored or logged.

Glowpixel Labs operates 100% on your device. Every image transformation, canvas render, and manifest string compiles locally in your browser memory. No image bytes or personal data ever touch an external network. Read our privacy policy for full details on our local processing guarantees.

Preparing artwork that works at every size

Design the icon on a square canvas with the subject centred, since each platform masks it differently: iOS rounds the corners, while Android adaptive icons crop a circle or squircle from the middle. Keep important shapes inside the central safe zone, roughly the middle seventy percent, and use the maskable export for Android so nothing is trimmed. Avoid fine text, because a sixteen-pixel favicon and a home-screen icon cannot show it. Choose a solid background where the platform forbids transparency, then check the preview at the smallest size before downloading the full set as a ZIP.