Show website icon when sharing in WhatsApp

Question

The title may sound vague, but I want my website icon to show up in WhatsApp when I share it (like the example below).

Thought this would suffice, but apparently it doesn't work that way:

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

EDIT

After fast reading OpenGraph doc (& other comments). I added the following within my head:

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

It's still not showing up, but I don't know if it "needs time" to show up or is it something else like maybe the noindex, nofollow?

Warrington

#19779120 – Assorted

This explains all medium.com/@richardoosterhof/… – Lune

Now check with this iframely.com/debug – Lune

Answer 1

You should see the image after restarting WhatsApp. If this doesn't work, you should check the image properties: they should be:

Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised (from here)

If it doesn't work, you should check your meta tags are right like below:

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

Hope this helps!

Coping

Answer 2

I searched extensively and tried every option that was provided here.

Assuming that you attempted to make changes as per the answer above by @user9643348 or anything similar, I will move on to tell you why it wasn't sufficient for me.

The open graph tags are behind the rich previews that you see while sharing links on social media. So, first of all you need to figure what is going wrong in your case and there's a tool to help you out - Facebook Sharing Debugger. Now there's no need to be intimidated by the name. It is fairly easy to use.

Step 1

All you got to do is provide your website URL in the space provided Facebook Sharing Debugger and hit debug.

Immediately you will be shown warnings (if any) that should be fixed. But more importantly, scroll down to the "Based on the raw tags, we constructed the following Open Graph properties" section and check the og:image tag. Most likely, you will see that it isn't showing the URL to the image that you want and instead is pointing to say, some blank.jpg.

So, why is there an og:image tag that points to a different image even though you have provided an og:image tag pointing to the specific image that you want? It might be due to the open graph tags added by some of the plugins that you are using. For me the villain was the Jetpack plugin.

Step 2

To find out, scroll down further to the bottom and click on the link that says "See exactly what our scraper sees for your URL" and search for the og:image tag. You will find that in addition to the tag that you provided, there is another one overriding your instruction.

Step 3

Find a way to remove the second set of open graph tags that are interfering with your own settings or add a function to override them.

For example, add the function below to your functions.php file:

function jeherve_custom_image( $media, $post_id, $args ) {
    if ( $media ) {
        return $media;
    } else {
        $permalink = get_permalink( $post_id );
        $url = apply_filters( 'jetpack_photon_url', 'YOUR_LOGO_IMG_URL' );

        return array( array(
            'type'  => 'image',
            'from'  => 'custom_fallback',
            'src'   => esc_url( $url ),
            'href'  => $permalink,
        ) );
    }
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );

Or I recommend this function (below):

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Now you might want to save this since functions.php is not meant to be edited and your changes will be lost with an update. You can bookmark the instructions here.

Once this is done, run debug/ scrape again and you will find that preview image (rich preview) is generated for you.

Now, enjoy your rich preview as you share on social media. It should appear something like - Rich Preview Sample (Sorry for the image link - I do not have the reputation yet to embed an image in to the answer.

Hope this helps.

NS

Rothschild

Also, there is this nice user-friendly tool to help you know how other apps see your site - debug.iframely.com – Rothschild