Search code examples
htmlfavicon

Display website icon in mobile web-search results

In the figure below each search result has a card that then has the website logo for it in the upper right hand corner. This is on Chrome for Android. Mobile search on Google for 'Facebook' using Chrome for Android

Some research has led me to believe that this is the favicon for the website and I've included it in my HTML using this favicon generator. I've included just the icon aspect of header tag in my current index.html that has been deployed.

    <!--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">

My current deployment service is Netlify.My problem is that even though I've done this, the website pops up in search results but not the logo. How do I get the website logo to show up in search results?

Solution

  • You can give a try to the favicon checker, which reports broken links, ill-formed images, etc. Full disclosure: I'm the author of this service.