什么是网络图标
网络图标，也叫 Favicon，是显示在浏览器标签页、书签栏或手机收藏夹里小图标。比如你打开百度、淘宝，标签页前面那个蓝色的 B 或红色的 T，就是它们的 Favicon。别看它小，一个合适的图标能让用户更快识别你的网站，提升专业感。
准备图标的格式和尺寸
大多数网站使用 .ico 格式的图标文件，但也支持 .png、.svg 等。推荐尺寸是 16×16 像素或 32×32 像素，保证在小尺寸下依然清晰。你可以用 Photoshop、在线工具如 favicon.io 或免费软件 GIMP 来制作。
如果用 PNG 图标，建议导出为 32×32 像素，背景透明，这样适配性更好。SVG 则适合需要高清缩放的场景，比如高分辨率屏幕。
上传图标文件到网站目录
把做好的图标文件（比如 favicon.ico）上传到网站的根目录，也就是和 index.html 同一层的位置。这是最简单的做法，浏览器会自动查找这个路径下的图标。
如果你习惯把资源分类管理，也可以放在 images 或 assets 文件夹里，但后续代码要对应调整路径。
在网页中添加引用代码
打开网站的 HTML 页面，在 <head> 区域加入以下代码：
<link rel="icon" href="favicon.ico" type="image/x-icon">如果是 PNG 图标，改成：
<link rel="icon" href="images/favicon.png" type="image/png">用 SVG 的话可以这样写：
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">苹果设备的特殊处理
如果你希望用户在 iPhone 上收藏网站时显示好看的图标，还得准备一张 180×180 像素的 PNG 图，并加上这段代码：
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">不加也没问题，但系统会截图页面来当图标，效果通常不如专门设计的好。
刷新页面查看效果
保存文件，刷新网页。如果没看到变化，可能是浏览器缓存了旧图标。可以尝试强制刷新（Ctrl + F5 或 Cmd + Shift + R），或者换个浏览器看看。有时候清一下浏览器缓存就能解决。
多个设备上的实际体验
比如你在咖啡馆用笔记本打开自己做的博客，标签页上有个小猫图标，朋友凑过来看一眼就知道这是你的个人站。再拿手机收藏一下，主屏幕上出现圆角图标，看起来就像个正规应用。这些细节会让别人觉得你用心经营，不只是随便发发内容。