我正在为我的 PWA 设置一个 Web 应用清单。但是Android的图标被挤压在一个圆形图标中。
我尝试了普通图标，没有背景，并且考虑了安全区。
安装在我的安卓设备上的图标图像
可悲的是，我没有找到任何文档，该图标确实让我感到烦恼。
编辑：
"name": "PWA-Test",
"short_name": "PWA-Test",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/assets/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/assets/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/assets/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/assets/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/assets/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/assets/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/assets/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/assets/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#5c3552",
"background_color": "#5c3552"
编辑2：当我只使用圆形图标时，它似乎有效。但是我猜每个版本的Android上的UI都不同。
通过制作圆形图标解决了它。现在的问题是，桌面上的图标现在也是圆形的。
首先，您需要创建一个包含 2 层的图标。
您可以使用此实用程序：https://maskable.app/editor
之后，您需要在清单中设置可屏蔽的目的.json
{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any maskable" // <-- New property value `"maskable"`
}
]
…
}
本文中的详细信息：https://web.dev/maskable-icon/
我在Android设备上运行PWA，我不必对图标进行任何特殊调整。
这是我的 Web 清单的一部分：
"icons": [
// Other sizes
{
"src": "/images/icons-144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
对于Chrome，它至少需要两个图标大小192x192和512x512：
包括 192x192 像素图标和 512x512 像素图标。Chrome 会自动缩放设备的图标。如果您希望缩放自己的图标并调整它们以达到像素完美，请以 48dp 为增量提供图标。
在 Chrome 71 或更高版本中生成的 WebAPK 将在初始屏幕上显示一个较大的图标。只要提供了推荐的图标，就不需要执行任何操作。