Quasar CLI 搭配 Webpack - @quasar/app-webpack
此建置目標包含各種針對個別瀏覽器和作業系統的特殊圖示。您需要所有這些圖示 - 如果您發現任何新的或遺失的圖示，請開啟 issue。
Icon Genie CLI
提示
我們強烈建議使用 Icon Genie CLI，因為它會取用來源圖示，並自動複製、縮放、最小化圖示，並將圖示放置在適當的目錄中。在需要時，它也會告訴您需要將哪些標籤新增到您的 /index.html 或 /src/index.template.html 檔案中。
使用 Icon Genie CLI 快速引導必要的圖片。如需完整的選項清單，請造訪 Icon Genie CLI 命令列表頁面。
$ icongenie generate -m pwa -i /path/to/source/icon.png [-b /path/to/background.png]content_paste
手動說明
public/
favicon.ico
icons/
favicon-128x128.png
favicon-96x96.png
favicon-32x32.png
favicon-16x16.png
icon-128x128.png
# 用於 PWA manifest
icon-192x192.png
# 用於 PWA manifest
icon-256x256.png
# 用於 PWA manifest
icon-384x384.png
# 用於 PWA manifest
icon-512x512.png
# 用於 PWA manifest
ms-icon-144x144.png
safari-pinned-tab.svg
apple-icon-120x120.png
apple-icon-152x152.png
apple-icon-167x167.png
apple-icon-180x180.png
apple-launch-828x1792.png
apple-launch-1125x2436.png
apple-launch-1242x2688.png
apple-launch-750x1334.png
apple-launch-1242x2208.png
apple-launch-640x1136.png
apple-launch-1536x2048.png
apple-launch-1668x2224.png
apple-launch-1668x2388.png
apple-launch-2048x2732.png
必要的 HTML 程式碼會進入 /index.html 或 /src/index.template.html 以參考上述檔案 (請注意，並非所有檔案都需要手動參考，因為 Quasar CLI 會自動注入其他 PWA 檔案)
<link rel="icon" type="image/ico" href="icons/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 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 X, 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 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 8, 7, 6s, 6 -->
<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">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="icons/apple-launch-1242x2208.png">
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-640x1136.png">
<!-- iPad Mini, Air, 9.7" -->
<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">
<!-- iPad Pro 10.5" -->
<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 Pro 11" -->
<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 Pro 12.9" -->
<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">content_paste