Question

我使用create react app并在公共目录中生成以下manifest.json：

{
  "name": "React_Starter",
  "short_name": "React_Starter",
  "theme_color": "#1d9ed6",
  "background_color": "#1d9ed6",
  "display": "standalone",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/images/icons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/images/icons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/images/icons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/images/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/images/icons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/images/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null,
}

这些图像尺寸是否足以用于生产渐进式Web应用程序（PWA）？或者我应该包括更多尺码？

此外，是否有一个工具我可以使用create react app而不ejecting生成给定logo.png的PWA图像图标并保存到构建目录

Answer 1

如果您想生成大量不同尺寸的图标，可以使用：https://realfavicongenerator.net

Answer 2

我认为你的列表中有相当数量的图标大小！

根据Google Developers网站，基线图标大小为48x48, 196x196, 128x128, 144x144, 152x152。

来自网站：

将图标保存到主屏幕时，Chrome首先会查找图标匹配显示器的密度，大小为48dp屏幕密度。如果未找到，则会搜索最接近的图标匹配设备特征。如果，无论出于何种原因，你想要具体关于以特定像素密度定位图标，您可以使用可选的密度成员，它需要一个数字。当你不要声明密度，默认为1.0。这意味着：“使用此图标对于屏幕密度1.0及以上“，这通常是你想要的。

您可以继续添加越来越多的图标尺寸，但最终只要您有一个很好的图标尺寸列表，Chrome就会为您处理这个尺寸。

我发现只要清单文件有效，你就应该好好去。您是否尝试过符合W3C规范规则的Manifest Validator？

生成渐进式Web应用程序图像图标和各种大小要求

2 个答案: