已配置favicon.io下载的图标资源后网站Favicon仍不显示，求代码排查

问题排查与解决方法 #

• 重复且错误的favicon声明冲突
  你的head头部最顶部额外多了一行错误的favicon声明：

  <link rel="icon" href="favicon-32x32.png"  type="image/x-icon">
  

  这行代码有两个问题：一是type属性和文件后缀不匹配，png格式的图标type应为image/png；二是和后面的同尺寸favicon声明路径不一致（一个是相对路径favicon-32x32.png，一个是根路径/favicon-32x32.png），会导致浏览器加载优先级混乱，直接删除这行重复代码即可。
• 路径匹配错误
  你使用了根路径写法/favicon-32x32.png，该写法要求所有favicon资源必须直接放在网站项目的根目录下（和html文件同级），如果你的favicon资源是放在从favicon.io下载后解压的子文件夹内，需要把路径补全，比如资源放在favicon文件夹下，就需要把所有favicon相关的href改为/favicon/xxx.png格式。
• 浏览器缓存问题
  浏览器对favicon的缓存周期非常长，修改代码后需要做硬刷新（Windows按Ctrl+F5，Mac按Command+Shift+R），或者直接打开无痕模式访问页面测试，避免本地缓存导致显示异常。
• 配置修正后的参考代码
  清理重复项后的head头部favicon配置参考：

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <title>Survey</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
  </head>
  

  额外提示：你之前的css路径用了Windows系统的反斜杠\，建议统一换成Web标准的正斜杠/，避免跨环境访问出错。

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