发布:admin2025-06-08 23:38:51 2830条浏览分类:世界杯日本爆冷
如何设置网站图标(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 格式以保持最佳质量
记得在所有页面都添加相关代码