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
❓ Frequently Asked Questions About Web Manifests
A web app manifest is a JSON file that provides essential metadata about your web application to browsers. It defines how your app appears when installed on a user's device, including its name, icons, theme colors, and launch behavior. Without a manifest, browsers cannot recognize your website as an installable application, and users won't see the "Add to Home Screen" prompt. The manifest is required for your site to qualify as a Progressive Web App (PWA) and enables features like custom splash screens, standalone display mode, and proper icon display on home screens.
For best results, use a PNG image with dimensions of at least 512x512 pixels. The image must be square (equal width and height) to avoid distortion when resized. PNG format is recommended because it supports transparency, allowing your icon to look professional on any background color. SVG files also work well since they scale infinitely without quality loss. Avoid JPEG if your icon has transparency needs. If using a complex logo, consider creating a simplified version specifically for icons, as fine details become invisible at smaller sizes like 16x16 or 32x32 pixels.
Implementation involves four main steps: First, extract the downloaded ZIP file. Second, upload the entire "icons" folder to your website's root directory. Third, place the manifest.json file in your root directory alongside your index.html. Fourth, copy the generated HTML link tags and paste them into the <head> section of your HTML pages. These tags tell browsers where to find your manifest and icons. After uploading, you can verify everything works by opening Chrome DevTools, navigating to the Application tab, and checking the Manifest section for any errors or warnings.
No, your image never leaves your device. Our Web Manifest Generator processes everything directly in your browser using the HTML5 Canvas API. When you upload an image, it's read locally by JavaScript and resized using your browser's built-in image processing capabilities. The generated icons and manifest file are created entirely on your computer. We don't have servers receiving or storing your images, ensuring complete privacy for your brand assets, logos, and designs. This client-side processing approach also means the tool works offline once the page is loaded.
Display modes control how much browser UI is visible when your PWA is launched. Standalone is the most common choice, hiding the browser's address bar and navigation while keeping the status bar visible—making your app feel native. Fullscreen hides all browser UI including the status bar, ideal for games and immersive media applications. Minimal-UI shows a minimal set of browser controls (back button, reload), useful when some navigation is helpful. Browser opens in a regular browser tab with full UI, which is rarely used for PWAs. Most applications should use standalone mode for the best user experience.
Maskable icons are a special format for Android devices that allows the operating system to apply different shapes to your app icon (circles, rounded squares, teardrops) while ensuring your main content remains visible. Android applies a "safe zone" mask that crops approximately 10% from each edge of your icon. Without maskable icons, your app icon might appear with awkward white borders or get cropped unexpectedly. Our generator automatically creates icons with both "any" and "maskable" purposes for larger sizes, ensuring compatibility across all Android launchers and icon shapes. For best results, keep your logo within the center 80% of your source image.
Display Mode Comparison
| Display Mode | Browser UI Shown | Best For |
|---|---|---|
| standalone | Status bar only, no address bar | Most apps, productivity tools, social apps |
| fullscreen | Nothing (complete immersion) | Games, video players, presentation apps |
| minimal-ui | Minimal navigation controls | Content readers, documentation sites |
| browser | Full browser interface | Websites that need bookmarking, sharing URLs |
PWA Installation Requirements
For browsers to show the install prompt for your PWA, you need to meet several technical criteria beyond just having a manifest:
- HTTPS: Your site must be served over a secure HTTPS connection (localhost is exempt for development)
- Valid Manifest: A properly formatted manifest.json with required fields (name, icons, start_url, display)
- Service Worker: A registered service worker that handles fetch events for offline functionality
- Icons: At minimum, 192x192 and 512x512 pixel icons must be defined in the manifest
- Engagement: Chrome requires users to engage with your site for at least 30 seconds before showing the install prompt
🔧 Testing Tip: Use Chrome DevTools' Lighthouse audit to check your PWA implementation. Navigate to the Lighthouse tab, select "Progressive Web App" category, and run the audit. It will identify any missing requirements and provide specific recommendations for improvement. You can also check the Application tab to verify your manifest is being read correctly.
Why Ads?
Ads help keep DC Tools free and running. Thank you for your support!
Found a Bug?
Help us improve! Report issues and suggestions.