「工具」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"
  }]
}
复制代码

---