---
title: App Icons for PWA
---
This build target includes manifest icons, favicons, and platform-specific assets. Icon Genie generates the recommended set for you. If you discover one that is new or missing, please [open an issue](https://github.com/quasarframework/quasar/issues).

The manifest icons include a `maskable` one (your icon over the `--background` image or the `--png-color` fill, sized for the safe zone that Android and Windows crop to) and a `monochrome` one (the shape of your icon, or of `--icon-monochrome`) for themed icons. Your `/src-pwa/manifest.json` declares them with the `purpose` property:

```json
{
  "src": "icons/icon-maskable-512x512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
},
{
  "src": "icons/icon-monochrome-512x512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "monochrome"
}
```

## Icon Genie CLI

> [!TIP]
> We highly recommend using the [Icon Genie CLI](../../icongenie/introduction.md), because it consumes a source icon and automatically clones, scales, minifies and places the icons in the appropriate directories for you. When needed, it also tells you what tags you'll need to add to your `/index.html` file.

Quickly bootstrap the necessary images with Icon Genie CLI. For a complete list of options, please visit the [Icon Genie CLI](../../icongenie/command-list.md) command list page.

```bash
icongenie generate -m pwa -i /path/to/source/icon.png [-b /path/to/background.png]
```

## Manual instructions

- **public**
  - **favicon.ico**
  - **icons**
    - **favicon-128x128.png**
    - **favicon-96x96.png**
    - **favicon-32x32.png**
    - **favicon-16x16.png**
    - **icon-128x128.png**
      _for the PWA manifest_
    - **icon-192x192.png**
      _for the PWA manifest_
    - **icon-256x256.png**
      _for the PWA manifest_
    - **icon-384x384.png**
      _for the PWA manifest_
    - **icon-512x512.png**
      _for the PWA manifest_
    - **icon-maskable-512x512.png**
      _for the PWA manifest (purpose maskable)_
    - **icon-monochrome-512x512.png**
      _for the PWA manifest (purpose monochrome)_
    - **safari-pinned-tab.svg**
    - **apple-icon-120x120.png**
    - **apple-icon-152x152.png**
    - **apple-icon-167x167.png**
    - **apple-icon-180x180.png**
    - **apple-launch-1320x2868.png**
    - **apple-launch-1206x2622.png**
    - **apple-launch-1878x2670.png**
    - **apple-launch-1398x2034.png**
    - **apple-launch-1260x2736.png**
    - **apple-launch-1290x2796.png**
    - **apple-launch-1179x2556.png**
    - **apple-launch-1284x2778.png**
    - **apple-launch-1170x2532.png**
    - **apple-launch-1080x2340.png**
    - **apple-launch-1242x2688.png**
    - **apple-launch-1125x2436.png**
    - **apple-launch-828x1792.png**
    - **apple-launch-750x1334.png**
    - **apple-launch-2064x2752.png**
    - **apple-launch-2048x2732.png**
    - **apple-launch-1668x2420.png**
    - **apple-launch-1668x2388.png**
    - **apple-launch-1640x2360.png**
    - **apple-launch-1668x2224.png**
    - **apple-launch-1620x2160.png**
    - **apple-launch-1488x2266.png**
    - **apple-launch-1536x2048.png**

The required HTML code that goes into `/index.html` to reference the above files (notice not all files need to be manually referenced as Quasar CLI automatically injects the other PWA ones):

```html
<link rel="icon" type="image/ico" href="favicon.ico" />
<link
  rel="icon"
  type="image/png"
  sizes="128x128"
  href="icons/favicon-128x128.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="96x96"
  href="icons/favicon-96x96.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="icons/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="icons/favicon-16x16.png"
/>
<!-- iPhone 18 Pro Max, 17 Pro Max, 16 Pro Max -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1320x2868.png"
/>
<!-- iPhone 18 Pro, 17 Pro, 17, 16 Pro -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1206x2622.png"
/>
<!-- iPhone Duo (inner display) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 626px) and (device-height: 890px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1878x2670.png"
/>
<!-- iPhone Duo (outer display) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 466px) and (device-height: 678px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1398x2034.png"
/>
<!-- iPhone Air -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1260x2736.png"
/>
<!-- iPhone 16 Plus, 15 Pro Max, 15 Plus, 14 Pro Max -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1290x2796.png"
/>
<!-- iPhone 16, 15 Pro, 15, 14 Pro -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1179x2556.png"
/>
<!-- iPhone 14 Plus, 13 Pro Max, 12 Pro Max -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1284x2778.png"
/>
<!-- iPhone 17e, 16e, 14, 13 Pro, 13, 12 Pro, 12 -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1170x2532.png"
/>
<!-- iPhone 13 mini, 12 mini -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1080x2340.png"
/>
<!-- iPhone 11 Pro Max, XS Max -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1242x2688.png"
/>
<!-- iPhone 11 Pro, XS -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
  href="icons/apple-launch-1125x2436.png"
/>
<!-- iPhone 11, XR -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-828x1792.png"
/>
<!-- iPhone SE (2nd & 3rd gen) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-750x1334.png"
/>
<!-- iPad Pro 13" (M4, M5) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-2064x2752.png"
/>
<!-- iPad Pro 12.9" (2nd gen and later), iPad Air 13" (M2 and later) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-2048x2732.png"
/>
<!-- iPad Pro 11" (M4, M5) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1668x2420.png"
/>
<!-- iPad Pro 11" (1st gen up to M2) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1668x2388.png"
/>
<!-- iPad (A16), iPad 10th gen, iPad Air 11" (M2 and later), iPad Air 4th & 5th gen -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1640x2360.png"
/>
<!-- iPad Pro 10.5", iPad Air 3rd gen -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1668x2224.png"
/>
<!-- iPad 7th, 8th & 9th gen -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1620x2160.png"
/>
<!-- iPad mini 6th gen, iPad mini (A17 Pro) -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1488x2266.png"
/>
<!-- iPad mini 5th gen, iPad 6th gen -->
<link
  rel="apple-touch-startup-image"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
  href="icons/apple-launch-1536x2048.png"
/>
```