在 WhatsApp 中共享时显示网站图标

Question

标题可能听起来很模糊，但我希望我的网站图标在我分享时显示在 WhatsApp 中（如下例所示）。

认为这就足够了，但显然它不是这样工作的：

<link rel="shortcut icon" href="css/img/favicon/favicon.ico" type="image/x-icon"/>

编辑

快速阅读 OpenGraph 文档（及其他评论）后。我在脑海中添加了以下内容：

<meta name="robots" content="noindex, nofollow" />
...
<meta property="og:title" content="Website - Home" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mywebsite.com/" />
<meta property="og:image" content="https://mywebsite.com/img/favicon/android-icon-192x192.png" />

<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon"/>

它仍然没有出现，但我不知道它是否“需要时间”才能出现，或者是其他类似的东西吗noindex, nofollow？

Answer 1

重新启动 WhatsApp 后您应该会看到该图像。如果这不起作用，您应该检查图像属性：它们应该是：

建议图片（JPG 或 PNG）大小小于 300KB，最小尺寸为 300 x 200 像素（来自此处）

如果它不起作用，您应该检查您的元标记是否正确，如下所示：

<meta property="og:site_name" content="Site">
<meta property="og:title" content="Site" />
<meta property="og:description" content="Site" />
<meta property="og:image" itemprop="image" content="/images/icon.png">
<meta property="og:type" content="website" />

希望这可以帮助！