如何设置网站图标（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 像素)

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 代码

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

<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/images/favicon/site.webmanifest">
<link rel="shortcut icon" href="/images/favicon/favicon.ico">

注意事项

• 确保所有的图标文件的路径正确
• 图标文件应该清晰可辨，即使在小尺寸下也能识别
• 建议使用 PNG 格式以保持最佳质量
• 记得在所有页面都添加相关代码