Favicon缺失求助：使用<link>标签加载指定路径图标却无法显示如何解决？

我来帮你捋捋这个问题——既然你已经确认路径存在，那咱们从几个最容易踩的坑入手排查：

• 先搞定浏览器缓存这个头号嫌疑犯
  浏览器特别爱缓存Favicon，哪怕你已经更新了资源，它可能还抱着旧的缓存不放。试试这几招：

  • 强制刷新页面：Windows/Linux按 Ctrl+Shift+R，Mac按 Cmd+Shift+R
  • 用无痕/隐私窗口打开网站，避开缓存验证
  • 直接在地址栏输入Favicon的完整URL（比如你的网站是http://your-site.com，那完整路径就是http://your-site.com/resources/img/favicon.png），看看能不能直接打开图片，确认服务器确实能返回这个资源

• 检查图标本身的格式和尺寸
  浏览器对Favicon的规格有要求，哪怕是PNG格式也可能因为尺寸不对不显示：

  • 标准尺寸优先选16x16、32x32或48x48像素，太大或太小的图标可能被浏览器忽略
  • 确认文件是真正的PNG格式：有时候文件后缀是.png但实际是JPG或其他格式，用PS、画图工具重新导出一个标准PNG试试

• 优化标签的写法和位置
  标签的位置和属性也可能影响兼容性：

  • 确保<link>标签放在<head>标签内部，别塞到<body>里
  • 补充type="image/png"属性，明确告诉浏览器资源格式：

    <link rel="shortcut icon" href="../resources/img/favicon.png" type="image/png">
    

  • 加上rel="icon"提升兼容性（部分浏览器更认这个属性）：

    <link rel="icon" href="../resources/img/favicon.png" type="image/png">
    <link rel="shortcut icon" href="../resources/img/favicon.png" type="image/png">
    

• 排查相对路径的陷阱
  相对路径是相对于当前页面的URL，而不是HTML文件的物理位置。比如你的页面是http://your-site.com/blog/detail.html，那../resources/img/favicon.png对应的是http://your-site.com/resources/img/favicon.png，如果你的资源实际在http://your-site.com/blog/resources/img/favicon.png，那路径就错了。
  稳妥起见，试试绝对路径（开头加斜杠，表示网站根目录）：

  <link rel="shortcut icon" href="/resources/img/favicon.png" type="image/png">
  

• 用开发者工具查服务器请求状态
  打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面，找到favicon.png的请求：

  • 如果状态码是404：说明路径还是有问题，或者服务器没配置好静态资源访问权限
  • 如果是200但还是不显示：看看响应的内容是不是正确的图片，可能服务器返回了错误的资源

• 兼容特殊浏览器（比如旧版IE）
  旧版IE只认ICO格式的Favicon，如果需要兼容这类浏览器，可以同时添加ICO格式的图标：

  <link rel="icon" href="../resources/img/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="../resources/img/favicon.png" type="image/png">
  

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