生成渐进式 Web 应用程序图像图标和各种尺寸要求答案

【问题标题】：Generating progressive web app image icons and various size requirements生成渐进式 Web 应用程序图像图标和各种尺寸要求
【发布时间】：2023-03-31 20:45:01
【问题描述】：

我正在使用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)？还是我应该包括更多尺寸？

另外，有没有我可以在没有ejecting 的情况下使用create react app 的工具来生成给定logo.png 的PWA 图像图标并保存到构建目录

【问题讨论】：

希望我的回答对您有所帮助

标签： create-react-app progressive-web-apps

【解决方案1】：

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

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

来自网站：

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

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

我发现只要清单文件通过验证，你就可以开始了。您是否尝试过遵循 W3C 规范规则的Manifest Validator？

【讨论】：

【解决方案2】：

如果你想生成很多不同大小的图标，你可以使用这个：https://realfavicongenerator.net

【讨论】：