如何阻止桌面版Firefox加载apple-touch-icon？静态页面解决方案问询

针对桌面版Firefox（124版本）会不必要下载apple-touch-icon的问题，静态页面可以用以下几种方法规避：

• 通过JavaScript动态加载标签：
  只在检测到Apple移动设备（如iPhone、iPad）时，才在页面中插入apple-touch-icon的link标签。桌面Firefox不会触发这段逻辑，也就不会发起下载请求。示例代码：

  // 检测是否为Apple移动设备
  if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
    const link = document.createElement('link');
    link.rel = 'apple-touch-icon';
    link.sizes = '180x180';
    link.href = '/apple-touch-icon.png';
    document.head.appendChild(link);
  }
  

• 利用媒体查询过滤设备：
  给link标签添加media属性，指定仅在触摸设备（无hover能力）下生效，桌面设备（支持hover）不会匹配该媒体查询，从而避免下载。示例代码：

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" media="(hover: none)">
  

• 临时兼容写法：
  可以尝试将rel="apple-touch-icon"改为rel="apple-touch-icon-precomposed"，部分版本的Firefox不会识别这个属性，从而跳过下载，但这个方法可能随Firefox版本更新失效，仅作临时过渡方案。

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