为何Favicon在移动端失效但桌面端正常？Node+Express环境排查

首先明确位置问题：Favicon相关的<link>标签放在<head>内任意位置都能被浏览器识别，不过通常会习惯放在<head>靠前的位置，让浏览器优先加载，但位置不是导致你移动端不生效的原因。

接下来分析移动端Favicon无法显示的可能原因：

• 图片尺寸不符合要求：针对苹果设备的apple-touch-icon，官方推荐使用180x180px的PNG图片，尺寸不符的话移动端可能不会渲染显示
• 资源路径验证：在移动端浏览器直接访问/img/tb-fav-1.png地址，确认能否正常打开图片，排查路径配置错误或Express静态资源未正确托管的问题
• 缓存干扰：移动端浏览器缓存可能未更新，可尝试清除浏览器缓存，或给图片URL添加版本号（比如/img/tb-fav-1.png?v=1）强制刷新资源
• 补充必要属性：给apple-touch-icon加上sizes属性明确指定尺寸，示例：

  <link rel="apple-touch-icon" sizes="180x180" href="/img/tb-fav-1.png">
  

• 检查Express静态资源配置：确保已正确设置静态文件目录，比如图片放在项目根目录的public/img下时，需在Express中配置：

  app.use(express.static('public'));
  

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