PWA 其中有一個(gè)能力就是把網(wǎng)站安裝到系統(tǒng)桌面，以原生應(yīng)用的體驗(yàn)來運(yùn)行網(wǎng)站，使用戶無需再找開瀏覽器輸入網(wǎng)址進(jìn)入網(wǎng)站，而是可以直接點(diǎn)擊安裝好的應(yīng)用直接運(yùn)行，給使網(wǎng)站訪問縮短路徑及增加網(wǎng)站的曝光度。

其中有一個(gè)問題就是需要生成應(yīng)用的圖標(biāo)，通常來說需要在 manifest.json 的應(yīng)用清單文件中配置多種尺寸的 ico 來適配不同分辨率的設(shè)備。而通常來說設(shè)計(jì)師只會(huì)給一個(gè)尺寸的圖標(biāo)。

為了解決生成不同分辨率圖標(biāo)的問題，這里就開發(fā)了這個(gè)應(yīng)用。

使用

訪問地址：

https://lp-pwa.gitee.io/pwa-genicon/ (Gitee 托管)
https://lecepin.github.io/pwa-genico/ (Github 托管)

界面：

功能：

• 提供 PNG 圖片，勾選要生成的尺寸，可以直接進(jìn)行轉(zhuǎn)換生成。
• 勾選 生成 favicon.ico ，可用于生成瀏覽器支持的 favicon.ico 圖標(biāo)文件。

示例：

配置：

manifest.json，按照 icon 的尺寸和格式進(jìn)行填寫到 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也必須和實(shí)際尺寸一致，且寬高是1:1。

favicon.ico 的話，可以直接放入站點(diǎn)根目錄，即可生效。也可以使用如下代碼：

<link rel="shortcut icon" href="favicon.ico" />

manifest.json 同樣也支持 .ico 文件，可進(jìn)行多尺寸配置：

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

總結(jié)

以上是生活随笔為你收集整理的「工具」PWA Manifest图标及 favicon.ico 生成工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。