尽管设置了清单,为什么我还是看不到图标?
Why can't I see the favicon despite setting the manifest?
我正在开发一个没有 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 开发者工具中的控制台不会抛出任何错误。 Application/Manifest 通常向我们显示图标并且没有错误。
要显示网站图标,您不需要网络清单。只需将图像复制到 public 文件夹并确保文件名为 favicon.ico
.
Web 清单中的图标数组用于在用户在移动设备上安装 PWA 后显示图标。
有一个 look at this article,我在其中详细解释了不同的 Web 清单属性以及如何正确设置它,
我正在开发一个没有 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 开发者工具中的控制台不会抛出任何错误。 Application/Manifest 通常向我们显示图标并且没有错误。
要显示网站图标,您不需要网络清单。只需将图像复制到 public 文件夹并确保文件名为 favicon.ico
.
Web 清单中的图标数组用于在用户在移动设备上安装 PWA 后显示图标。
有一个 look at this article,我在其中详细解释了不同的 Web 清单属性以及如何正确设置它,