Web Manifest & Icon Generator
Generate all icon sizes and manifest.json for your Progressive Web App.
📖 Complete Guide to Web App Manifests and PWA Icons
A Web App Manifest is the cornerstone of any Progressive Web Application (PWA). This JSON file tells browsers how your web application should behave when installed on a user's device, including its name, icons, colors, and display preferences. Our Web Manifest Generator simplifies the entire process by creating all necessary icon sizes and a properly formatted manifest.json file from a single source image.
What Is a Progressive Web App (PWA)?
Progressive Web Apps represent the evolution of web technology, bridging the gap between traditional websites and native mobile applications. PWAs can be installed directly from a browser, work offline, send push notifications, and provide app-like experiences without requiring app store distribution. Major companies including Twitter, Pinterest, Starbucks, and Uber have adopted PWAs to improve user engagement and reduce development costs.
The web app manifest is what transforms a regular website into an installable PWA. Without it, browsers cannot recognize your site as an application, and users cannot add it to their home screens with a custom icon and splash screen.
Understanding Icon Size Requirements
Different platforms and devices require different icon sizes for optimal display. Our generator creates all 12 essential sizes used across Android, iOS, Windows, and various browsers. Each size serves a specific purpose in ensuring your app looks crisp and professional on every device.
| Size (px) | Primary Use | Platform/Context |
|---|---|---|
| 16x16 | Favicon (browser tab) | All browsers, bookmarks bar |
| 32x32 | Favicon (high DPI displays) | Retina displays, Windows taskbar |
| 48x48 | Windows site icon | Windows desktop shortcuts |
| 72x72 | Android icon (low density) | Android LDPI devices |
| 96x96 | Google TV icon | Smart TVs, Android TV |
| 128x128 | Chrome Web Store | Chrome extensions, web store listings |
| 144x144 | Windows 8/10 tile | Windows Start menu tiles |
| 152x152 | iPad touch icon | iPad home screen |
| 180x180 | iPhone touch icon | iPhone home screen (iOS 8+) |
| 192x192 | Android home screen icon | Android XXXHDPI, Chrome install prompt |
| 384x384 | Android splash screen | PWA splash screens on Android |
| 512x512 | Primary PWA icon | High-res splash screens, app stores |
Manifest.json Properties Explained
The manifest file contains several important properties that control how your PWA appears and behaves. Understanding these options helps you customize your app's presentation and user experience.
- name: The full name of your application displayed during installation prompts and in app listings. Should be descriptive but concise (maximum 45 characters recommended)
- short_name: A condensed version of your app name used when space is limited, such as on home screens. Keep this under 12 characters to prevent truncation
- description: A brief explanation of what your app does. This appears in app stores and installation prompts to help users understand your app's purpose
- start_url: The URL that loads when users launch your installed app. Typically set to "/" but can include query parameters for analytics tracking
- scope: Defines which URLs are considered part of your app. Navigation outside this scope opens in a regular browser window
- display: Controls how the browser UI appears. Options include standalone (app-like), fullscreen (gaming/media), minimal-ui (some browser controls), and browser (traditional)
- orientation: Lock the app to portrait, landscape, or allow any orientation based on your app's design requirements
- theme_color: Sets the color of the browser's address bar and status bar on mobile devices, creating a cohesive branded experience
- background_color: The splash screen background color displayed while your app loads. Should match your app's initial background for a seamless transition
💡 Design Tip: For the best results, start with a square PNG image of at least 512x512 pixels. Use simple, recognizable designs with bold colors that remain legible at smaller sizes. Avoid fine details and text that become illegible when scaled down to 16x16 pixels. Consider using a transparent background for versatility across different platform backgrounds.
Maskable Icons Explained
Maskable icons are a special icon format designed for Android devices that apply various shapes (circles, rounded squares, etc.) to app icons for visual consistency. When you mark an icon with the "maskable" purpose, Android can crop the icon to fit different shapes while keeping your main content visible within a "safe zone" that covers approximately 80% of the center of the image.
Our generator automatically marks 192x192, 384x384, and 512x512 icons as "any maskable," meaning they work both as regular icons and maskable icons. For best results with maskable icons, ensure your main logo or symbol stays within the center 80% of your source image.
How to Implement Your Generated Files
After generating your icons and manifest, follow these steps to implement them on your website:
- Step 1: Download and extract the ZIP file containing all generated assets
- Step 2: Create an "icons" folder in your website's root directory and upload all icon files
- Step 3: Upload manifest.json to your website's root directory (same level as index.html)
- Step 4: Add the provided HTML link tags to the <head> section of every page on your site
- Step 5: Test your implementation using Chrome DevTools (Application tab) or Lighthouse audit
- Step 6: Verify the install prompt appears on mobile browsers after meeting PWA criteria