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

王樂平 2022-01-07 11:04:09 阅读数:633

工具 pwa manifest favicon.ico favicon

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

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

為了解决生成不同分辨率圖標的問題,這裏就開發了這個應用。

使用

訪問地址:

https://lp-pwa.gitee.io/pwa-genicon/ (Gitee 托管)
https://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/pngsizes也必須和實際尺寸一致,且寬高是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"
}]
}
版权声明:本文为[王樂平]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201071104085407.html