PWA Image Generator

This tool generates images for a Progressive Web App (PWA). It generates various images such as favicons, app icons, and splash screens. PWAs are a type of website that can be installed and run on your device like an app. They require more image assets than traditional websites to provide a native app-like experience.

Source Image is Too Small

The image you uploaded is too small to generate the required images. Please upload an image that is at least 512x512 pixels or upload an SVG image.

Regular Icon
Maskable Icon
Generated Images
    HTML Meta Tags

    Place the following in the <head> section of each of your HTML files.

    Web App Manifest

    Save the following JSON as manifest.webmanifest in the root of your web application.

    Explanation / Documentation

    Progressive Web Apps (PWAs) need a lot of images in order to function and look right. This tool generates all of the required images from a single source image.

    Favicons

    • favicon.svg
    • favicon-16.png
    • favicon-32.png

    Favicons are the small icons that appear in the browser tab and on bookmarks. There is a lot of discussion around what sizes and formats to provide. From the research I have done, the best approach seems to be to have three images: a 16x16 PNG, a 32x32 PNG, and an SVG. The PNGs are there for legacy support. The SVG is for modern browsers and can be scaled to any size the browser needs.

    If you are using a PNG as your source image, the favicons will include a 48x48 PNG instead of the SVG.

    Apple Touch Icon

    • icon-180.png

    The Apple Touch Icon is used when users add your web app to their home screen on iOS devices. It should be a PNG image with a size of 180x180 pixels.

    Manifest Icons

    • icon-192.png
    • icon-512.png
    • icon-192-maskable.png
    • icon-512-maskable.png

    These icons are specified in the web app manifest and are used when users install your web app on their devices. The exception to this is Apple devices, which use the Apple Touch Icon instead. The maskable icons are used on platforms that crop icons into non-rectangular shapes (such as circles). They contain extra padding so that the important parts of the icon are not cut off.

    The images should be four PNG images: two standard icons (192x192 and 512x512) and two maskable icons (192x192 and 512x512).

    Splash Screens

    • splash-{width}x{height}.png

    Splash screens are displayed while your web app is being opened. Most platforms generate these images automatically from your Manifest Icon, but iOS does not. iOS requires your web app to provide an image with the exact dimensions of the device's screen, which means providing a lot of very specific images. If you don't provide splash screen images, iOS will show a black screen while your app is opening.

    The images should be PNG images with the exact dimensions of the device screens they are intended for.