图标 http://localhost:3000/favicon.ico 的实际大小 (48x48)px 与指定大小 (16x16)px 不匹配？答案

【问题标题】：Actual size (48x48)px of Icon http://localhost:3000/favicon.ico does > not match specified size (16x16)px?图标 http://localhost:3000/favicon.ico 的实际大小 (48x48)px 与指定大小 (16x16)px 不匹配？
【发布时间】：2022-11-09 02:39:03
【问题描述】：

我有一个简单的反应 PWA 项目。

public
    index.html
    favicon.ico
    logo-192x192.png
    logo-512x512.png
    manifest.json

清单.json：

{
  "name": "Name",
  "short_name": "Name",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#fff",
  "description": "A simply PWA app.",
  "icons": [
    {
      "src": "/favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
        "src": "/logo-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/logo-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
  ]
}

索引.html：

...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo-192x192.png" />
...

但在应用警告：

Icon http://localhost:3000/favicon.ico 的实际大小 (48x48)px 与指定尺寸 (64x64) 像素不匹配

我该如何解决这个警告？

【问题讨论】：

标签： manifest

【解决方案1】：

知道当前图标为48x48. 您可以删除它们，因为它们是额外的。它们的存在只是为了在其中一个正确时猜测图标的大小

{ "src": "/favicon.ico", "sizes": 48x48", "type": "image/x-icon" },

【讨论】：