「工具」PWA Manifest圖標及 favicon.ico 生成工具

PWA 其中有一個能力就是把網站安裝到系統桌面，以原生應用的體驗來運行網站，使用戶無需再找開瀏覽器輸入網址進入網站，而是能夠直接點擊安裝好的應用直接運行，給使網站訪問縮短路徑及增長網站的曝光度。

其中有一個問題就是須要生成應用的圖標，一般來講須要在 manifest.json 的應用清單文件中配置多種尺寸的 ico 來適配不一樣分辨率的設備。而一般來講設計師只會給一個尺寸的圖標。

爲了解決生成不一樣分辨率圖標的問題，這裏就開發了這個應用。

使用

訪問地址：

lp-pwa.gitee.io/pwa-genicon… (Gitee 託管)

lecepin.github.io/pwa-genico/ (Github 託管)

界面：

功能：

• 提供 PNG 圖片，勾選要生成的尺寸，能夠直接進行轉換生成。
• 勾選 生成 favicon.ico ，可用於生成瀏覽器支持的 favicon.ico 圖標文件。

示例：

配置：

manifest.json，按照 icon 的尺寸和格式進行填寫到 icons 屬性中便可：

{
  "icons": [{
    "src": "icons/256.png",
    "type": "image/png",
    "sizes": "256x256"
  }, {
    "src": "icons/192.png",
    "type": "image/png",
    "sizes": "192x192"
  }, {
    "src": "icons/144.png",
    "type": "image/png",
    "sizes": "144x144"
  }]
}
複製代碼

注： type 必須是 image/png，sizes也必須和實際尺寸一致，且寬高是1:1。

favicon.ico 的話，能夠直接放入站點根目錄，便可生效。也能夠使用以下代碼：

<link rel="shortcut icon" href="favicon.ico" />
複製代碼

manifest.json 一樣也支持 .ico 文件，可進行多尺寸配置：

{
  "icons": [{
    "src": "favicon.ico",
    "sizes": "64x64 32x32 24x24 16x16",
    "type": "image/x-icon"
  }]
}
複製代碼

---