一个生成各种尺寸 favicon 的网页工具
https://realfavicongenerator.net/
上传图片，它会生成如下文件
.
├── apple-touch-icon.png
├── favicon-96x96.png
├── favicon.ico
├── favicon.svg
├── site.webmanifest
├── web-app-manifest-192x192.png
└── web-app-manifest-512x512.png
将 site.webmanifest 里的文本编辑成你自己的内容
如何使用？
以 nextjs 为例：
拷贝所有文件到项目的 ./public 文件夹，然后设置如下：
export const metadata: Metadata = {
icons: {
icon: [
{
url: "/favicon.ico",
sizes: "any"
},
{
url: "/favicon.svg",
type: "image/svg+xml"
}
],
apple: [
{
url: "/apple-touch-icon.png",
sizes: "180x180",
type: "image/png"
}
],
other: [
{
rel: "manifest",
url: "/site.webmanifest"
}
]
}
}
页:
[1]