如何设置网站图标（Favicon）

1准备图标文件

首先需要准备以下尺寸的图标文件：

favicon.ico (16x16 或 32x32 像素)

favicon-16x16.png (16x16 像素)

favicon-32x32.png (32x32 像素)

apple-touch-icon.png (180x180 像素，用于 iOS 设备)

android-chrome-192x192.png (192x192 像素)

android-chrome-512x512.png (512x512 像素)

提示： 可以使用 Real Favicon Generator

在线工具生成所有需要的图标文件。只需上传一个高质量的原始图像（建议至少 512x512 像素），工具会自动生成所有所需尺寸。

2创建文件结构

将生成的图标文件放在网站的 /images/favicon/ 目录下：

/images/favicon/

├── favicon.ico

├── favicon-16x16.png

├── favicon-32x32.png

├── apple-touch-icon.png

├── android-chrome-192x192.png

├── android-chrome-512x512.png

└── site.webmanifest

3创建 Manifest 文件

在 /images/favicon/ 目录下创建 site.webmanifest 文件：

{

"name": "网站名称",

"short_name": "短名称",

"icons": [

{

"src": "/images/favicon/android-chrome-192x192.png",

"sizes": "192x192",

"type": "image/png"

},

{

"src": "/images/favicon/android-chrome-512x512.png",

"sizes": "512x512",

"type": "image/png"

}

],

"theme_color": "#ffffff",

"background_color": "#ffffff",

"display": "standalone"

}

4添加 HTML 代码

在所有页面的 标签中添加以下代码：

注意事项

确保所有的图标文件的路径正确

图标文件应该清晰可辨，即使在小尺寸下也能识别

建议使用 PNG 格式以保持最佳质量

记得在所有页面都添加相关代码