尽管设置了清单,我为什么仍看不到图标?

时间:2019-09-06 00:33:48

标签: webpack frontend favicon manifest.json

我正在开发没有CRA的React页面。我需要设置一个图标和服务人员。因此,我设置了一个Web清单,但未显示该收藏夹图标。我该如何解决?

该环境是使用Webpack和React构建的。我尝试添加favicons-webpack-plugin并在html-webpack-plugin上添加favicon属性。

{
  "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开发者工具中的控制台不会引发任何错误。 Application / Manifest通常会向我们显示图标,并且也没有错误。

1 个答案:

答案 0 :(得分:0)

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

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

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