尽管设置了清单，为什么我看不到图标？答案

【问题标题】：Why can't I see the favicon despite setting the manifest?尽管设置了清单，为什么我看不到图标？
【发布时间】：2019-09-06 00:33:48
【问题描述】：

我正在开发一个没有 CRA 的 React 页面。我需要设置一个网站图标和一个服务人员。所以，我设置了一个网络清单，但没有显示网站图标。我该如何解决？

环境是使用 Webpack 和 React 构建的。我尝试添加favicons-webpack-plugin 并在html-webpack-plugin 添加一个网站图标属性。

{
  "short_name": "DSM DMS",
  "name": "DSM-DMS Daedeok Software Meister-highschool - Dormitory Management System",
  "icons": [
    {
      "src": "./public/favicon.png",
      "sizes": "192x192 168x168 144x144 96x96 72x72 64x64 48x48 32x32 24x24 16x16",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

//webpack.config.js
const WebpackPwaManifest = require('webpack-pwa-manifest');
const ManifestConfig = require('manifest.json');
//...
plugins: [...,new Webpack(ManifestConfig),...]
//...

我认为如果我设置清单，我可以显示网站图标，但事实并非如此。 Chrome 开发者工具中的控制台不会抛出任何错误。应用程序/清单通常向我们显示图标，也没有错误。

【问题讨论】：

标签： webpack frontend favicon manifest.json

【解决方案1】：

要显示网站图标，您不需要网络清单。只需将图像复制到公用文件夹并确保文件名为favicon.ico。

Web 清单中的图标数组用于在用户在移动设备上安装 PWA 后显示图标。

有一个look at this article，我在这里详细解释了不同的网络清单属性以及如何正确设置它，

【讨论】：