首先准备16×16或32×32像素的ICO格式图标文件并命名为favicon.ico，上传至网站根目录；然后在HTML的<head>中添加link标签引用图标，推荐同时支持PNG格式以适配多设备；最后清除浏览器缓存或通过隐身模式测试显示效果。
在网页中设置favicon.ico图标能让浏览器标签页、书签栏等位置显示你自定义的小图标，提升网站专业度。设置方法简单，只需将图标文件放置到指定位置，并在HTML代码中引用即可。
1. 准备favicon图标文件
favicon通常是一个16×16像素或32×32像素的ICO格式图片。你可以使用图像处理软件（如Photoshop、GIMP）或在线工具将PNG、JPG等格式转换为ico格式。
常见命名是favicon.ico，建议保持此名称以便浏览器自动识别。
2. 上传图标到网站根目录
将生成的favicon.ico文件上传到网站的根目录下，例如：
立即学习“前端免费学习笔记（深入）”；
https://www.yoursite.com/favicon.ico大多数浏览器会自动请求该路径下的图标文件，无需额外代码。
3. 在HTML中显式引用图标（可选但推荐）
为了确保兼容性和支持多种设备（如苹果设备、安卓手机），建议在网页的<head>区域添加link标签明确指定图标路径。
示例代码：
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <!-- 支持现代浏览器 --> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
如果你有PNG格式的高分辨率图标（如用于移动设备），也可以添加：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
4. 清除浏览器缓存并测试效果
浏览器通常会缓存favicon，修改后可能不会立即显示。可尝试以下方式验证：
- 清除浏览器缓存
- 在隐身模式下打开网站
- 直接访问 https://yoursite.com/favicon.ico 查看是否能加载
基本上就这些。只要图标文件存在且路径正确，页面刷新后应该就能看到你的小图标出现在浏览器标签上了。
