网站建设面谈话术,连云港中信建设证券网站,现在去兰州会不会被隔离,wordpress 直播 视频教程PWA 其中有一个能力就是把网站安装到系统桌面#xff0c;以原生应用的体验来运行网站#xff0c;使用户无需再找开浏览器输入网址进入网站#xff0c;而是可以直接点击安装好的应用直接运行#xff0c;给使网站访问缩短路径及增加网站的曝光度。
其中有一个问题就是需要生…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 relshortcut icon hreffavicon.ico /manifest.json 同样也支持 .ico 文件可进行多尺寸配置
{icons: [{src: favicon.ico,sizes: 64x64 32x32 24x24 16x16,type: image/x-icon}]
}
