一个生成各种尺寸 favicon 的网页工具

https://realfavicongenerator.net/

上传图片，它会生成如下文件

1. .
   
2. ├── apple-touch-icon.png
   
3. ├── favicon-96x96.png
   
4. ├── favicon.ico
   
5. ├── favicon.svg
   
6. ├── site.webmanifest
   
7. ├── web-app-manifest-192x192.png
   
8. └── web-app-manifest-512x512.png

复制代码

将 site.webmanifest 里的文本编辑成你自己的内容

如何使用？

以 nextjs 为例：

拷贝所有文件到项目的 ./public 文件夹，然后设置如下：

1. export const metadata: Metadata = {
   
2.   icons: {
   
3.     icon: [
   
4.       {
   
5.         url: "/favicon.ico",
   
6.         sizes: "any"
   
7.       },
   
8.       {
   
9.         url: "/favicon.svg",
   
10.         type: "image/svg+xml"
    
11.       }
    
12.     ],
    
13.     apple: [
    
14.       {
    
15.         url: "/apple-touch-icon.png",
    
16.         sizes: "180x180",
    
17.         type: "image/png"
    
18.       }
    
19.     ],
    
20.     other: [
    
21.       {
    
22.         rel: "manifest",
    
23.         url: "/site.webmanifest"
    
24.       }
    
25.     ]
    
26.   }
    
27. }

复制代码