React网站短信分享时显示默认React图标问题求助

短信应用（如iMessage、Android短信）不会直接读取浏览器的favicon，而是通过Open Graph(OG)标签或Web App Manifest抓取图标。按以下步骤排查修复：

1. 添加/完善Open Graph(OG)图标标签 #

在public/index.html的<head>区域添加OG图片标签，指定自定义图标：

<meta property="og:image" content="https://你的网站域名/path/to/your-custom-icon.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

• 建议使用1200x630尺寸的图片，适配大多数短信平台的预览规则
• 确保图片路径可公开访问（AWS S3存储桶需开启对应文件的公共读权限）

2. 更新Web App Manifest配置 #

检查public/manifest.json中的icons字段，替换为自定义图标，覆盖多尺寸需求：

{
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

• 移除manifest中残留的默认React图标配置，确保所有图标指向自定义资源

3. 清除缓存并重新部署 #

• 清理本地项目的旧图标文件（如public/favicon.ico、public/logo192.png等默认React图标）
• 若使用AWS CloudFront，需手动清除缓存，避免旧资源被分发
• 重新部署静态资源到S3，确保新的HTML和manifest文件生效

4. 验证与测试 #

• 查看页面源码，确认OG标签和manifest路径正确加载
• 用目标短信应用发送链接给自己测试，部分平台可能有缓存延迟，可等待几分钟再重试

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