Quasar CLI with Vite - @quasar/app-vite v3
Warning! Beta Stage
The Quasar SSG Mode is currently in the “beta” stage. Based on the community feedback, the API may change in the future, so check the release notes each time you upgrade “@quasar/app-vite”.
An SSG site uses the same favicon assets as a SPA. When PWA takeover is enabled, it also needs manifest icons and may include Apple touch icons and launch images.
Icon Genie CLI
TIP
We highly recommend using the Icon Genie CLI v6.1+, 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.
Generate the appropriate assets with Icon Genie CLI. For the complete option list, see the Icon Genie CLI command list.
# SSG only:
icongenie generate -m ssg -i /path/to/source/icon.png
# SSG + PWA:
icongenie generate -m ssg,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
The required HTML code that goes into /index.html to reference the above files:
<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"
/>With SSG + PWA mode, you also need the PWA assets:
public/
icons/
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
And the corresponding HTML code to go into /index.html file (notice not all files need to be manually referenced as Quasar CLI automatically injects the other ones):
<!-- 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"
/>