Firebase托管站点favicon在iOS Safari显示异常问题求助

1. 配置Firebase Hosting明确重写规则 #

默认Firebase Hosting的隐式重写逻辑可能导致iOS Safari解析资源异常，修改firebase.json添加明确的根路径映射规则，确保根请求直接返回index.html：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/",
        "destination": "/index.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

部署更新后的配置：

firebase deploy --only hosting

2. 改用绝对路径引用favicon #

将index.html中favicon的href改为绝对路径，避免不同请求路径下的相对解析错误：

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

如果使用apple-touch-icon，同样改为绝对路径：

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

3. 清除iOS Safari缓存 #

iOS对favicon的缓存极顽固，需手动清除旧缓存：

• 打开设备「设置」→「Safari浏览器」→「清除历史记录与网站数据」
• 或在Safari中打开网站，长按刷新按钮选择「重新加载」强制刷新资源

4. 验证请求响应一致性 #

用curl对比根请求和/index.html请求的响应头，确认两者返回内容一致：

curl -I https://example.com
curl -I https://example.com/index.html

检查Content-Type是否为text/html; charset=utf-8，且根请求无额外Location重定向头，确保直接返回index.html内容。

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