如何在HTML中插入浏览器窗口顶部的网站小图标（Favicon）

你用<img>标签放在<head>里的方法是错误的，这类图标被称为Favicon，需要通过<link>标签引入，具体操作如下：

1. 准备图标文件

   • 优先制作16×16或32×32像素的.ico格式文件（兼容性最好），也可以使用PNG、SVG等格式；
   • 若需要适配苹果设备的触摸图标，可额外准备180×180像素的PNG文件。

2. 在HTML的<head>中插入标签
   将以下代码添加到页面的<head>区域，根据你的图标格式和路径调整href值：

   <!-- 基础ICO格式图标，兼容多数浏览器 -->
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   <!-- 可选：PNG格式图标，适配高分辨率屏幕 -->
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <!-- 可选：苹果设备触摸图标 -->
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   

3. 注意事项

   • href必须指向图标文件的实际路径：如果图标在网站根目录，就写/favicon.ico；如果在子文件夹（比如images），则写/images/favicon.ico；
   • 浏览器会缓存旧的Favicon，修改后需按Ctrl+F5强制刷新页面，或清除浏览器缓存才能看到新图标；
   • 若没有制作图标的工具，可在线生成后下载到本地使用（无需外链，直接放在自己的网站目录中）。

内容的提问来源于stack exchange，提问作者Jordan Shongo