网站图标设置教程

发布: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 格式以保持最佳质量

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