PWA Application Icons

PWAs need at least three icons: a favicon for the browser page, a device icon for the for the installed application, and an icon used on the splash screen of the installed application.

Using a Custom Icon

Vaadin uses and serves default PWA icons automatically, but you can use a custom icon.

To use a custom icon image:

  1. Create an icon image named icon.png. The icon must be in PNG format.

  2. Add the image to your src/main/webapp/icons/ folder.

Vaadin automatically scans for an image named icon.png in the **/icons** folder in the webapp resources folder. It uses this image to create appropriately-sized images for different devices. If no icon is found, the default image is used as a fallback.

To ensure that all resized images are attractive, use an image of at least 512 x 512 pixels. This is large enough to only be downscaled, as upscaling can cause pixelation.

Overriding Generated Icons

All generated images are named using the icon-*[width]x[height]*.png notation, for example icon-1125x2436.png.

To override any generated image:

  1. Create an image of the size you want to override and name in using the notation mentioned above. For example, icon-1125x2436.png for a custom hi-res splash screen image for iOS devices.

  2. Add the image to your src/main/webapp/icons/ folder.

Renaming Icons

You can change the default icon path to a custom path, using the iconPath parameter in the @PWA annotation.

Example: Defining a custom path using the iconPath parameter in the @PWA annotation.

Java

  1. @PWA(name = "My Progressive Web Application",
  2.      shortName = "MyPWA",
  3.      iconPath = "img/icons/logo.png")

  • Icon images will now be:

    • Named using the value in the iconPath* parameter. For example the 512 x 512 pixel image would be img/icons/logo-512x512.png.

    • Stored in the src/main/webapp/img/icons/ folder.