> Markdown version of [PWA Application Icons](https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-icons). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# 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.

## <a id="using-a-custom-icon"></a>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.

## <a id="overriding-generated-icons"></a>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.

## <a id="renaming-icons"></a>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
@PWA(name = "My Progressive Web Application",
     shortName = "MyPWA",
     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.

`F94302B0-BF04-4949-9AFB-5BDDC4F4FDE3`