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"
- }
- ]
- }
- }
复制代码 |