Favicon在社交媒体链接预览中不显示，该如何修复？

普通浏览器能识别你用的<link rel="shortcut icon">标签，但Slack、WhatsApp这类社交平台不吃这一套——它们依赖Open Graph（OG）图标标签或者专门优化的平台图标，而非传统的favicon.ico。

按以下步骤修复：

1. 补上Open Graph图标标签 #

在HTML的<head>里添加OG相关标签，指定尺寸合适的图标（推荐180x180px的PNG格式，兼容性最好）：

<meta property="og:image" content="/path/to/your-social-icon.png">
<meta property="og:image:width" content="180">
<meta property="og:image:height" content="180">

注意路径用绝对路径（比如https://your-site.com/icon.png）或者正确的相对路径，保证平台爬虫能正常爬取到图标文件。

2. 补充多平台专用图标标签 #

额外添加这些标签，覆盖更多设备和平台的预览场景：

<!-- 苹果设备Touch图标 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Windows磁贴图标 -->
<meta name="msapplication-TileImage" content="/mstile-150x150.png">

3. 检查图标文件规范 #

• 尺寸至少180x180px，避免平台自动缩放导致图标模糊失真
• 优先使用PNG格式（支持透明效果，比ICO更适配社交平台的预览逻辑）
• 确保图标文件可公开访问，没有设置权限拦截爬虫

4. 强制刷新平台缓存 #

社交平台会缓存链接预览内容，修改标签后需要主动触发刷新：

• Slack：发送链接时末尾加随机参数（比如?refresh=1），或者在消息菜单里选择「Refresh link preview」选项
• WhatsApp：退出APP后重新打开，换个会话测试新链接

5. 验证标签是否生效 #

使用平台自带的调试工具或在线OG标签验证工具，输入你的网址确认标签被正确识别。

完整代码示例 #

把所有标签整合到HTML的<head>中：

<head>
  <!-- 原有的浏览器Favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  
  <!-- Open Graph标签 -->
  <meta property="og:image" content="/social-icon-180x180.png">
  <meta property="og:image:width" content="180">
  <meta property="og:image:height" content="180">
  
  <!-- 多平台专用图标 -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <meta name="msapplication-TileImage" content="/mstile-150x150.png">
</head>

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