在移动网络搜索结果中显示网站图标

时间:2019-06-24 22:20:20

标签: html favicon

在下图中,每个搜索结果都有一张卡片,该卡片的右上角具有网站徽标。这是在Android版Chrome上。 Mobile search on Google for 'Facebook' using Chrome for Android

一些研究使我相信这是网站的favicon,并且我已经使用此favicon generator将其包含在HTML中。我在当前已部署的index.html中仅包括标头标签的图标内容。

    <!--Link address bar icon file for any browser-->
    <link rel="shortcut icon" href="./images/favicons/favicon.ico">
    <link rel="icon" sizes="16x16 32x32 64x64" href="./images/favicons/favicon.ico">
    <link rel="icon" type="image/png" sizes="196x196" href="./images/favicons/favicon-192.png">
    <link rel="icon" type="image/png" sizes="160x160" href="./images/favicons/favicon-160.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./images/favicons/favicon-96.png">
    <link rel="icon" type="image/png" sizes="64x64" href="./images/favicons/favicon-64.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicons/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicons/favicon-16.png">
    <link rel="apple-touch-icon" href="./images/favicons/favicon-57.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./images/favicons/favicon-114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./images/favicons/favicon-72.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./images/favicons/favicon-144.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./images/favicons/favicon-60.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./images/favicons/favicon-120.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./images/favicons/favicon-76.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./images/favicons/favicon-152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./images/favicons/favicon-180.png">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="./images/favicons/favicon-144.png">
    <meta name="msapplication-config" content="./images/favicons/browserconfig.xml">

我当前的部署服务是Netlify。我的问题是,即使这样做,该网站仍会弹出搜索结果,但不会弹出徽标。如何获得网站徽标以显示在搜索结果中?

1 个答案:

答案 0 :(得分:1)

您可以尝试使用favicon checker,该报告显示断开的链接,格式错误的图像等。完全公开:我是这项服务的作者。