In this article we will teach you how to show website logo in facebook and whatsapp on share.
Sharing a website or blog is a great concept to increase your website traffic. There are many social media platforms for sharing our website like Facebook, Twitter, Google+, Pinterest, LinkedIn, Reddit, Tumblr, WhatsApp etc.
But sometimes when we shares our website the logo of our website not shown and it is not nice for sharing our website. Now we will show some tricks to show website logo in Facebook and WhatsApp on share.
Step 1 : Show Website Logo on Facebook and WhatsApp on Share
To share your website on Facebook and WhatsApp you should have OpenGraph Tags on your website. To do this just paste the code given below in between head tags of your webpage i.e. <head> </head>
<!-- fb and whatsapp tags -->
<!-- This is your webpage language -->
<meta
property="og:locale" content="en_US" />
<!-- This is your webpage language -->
<!-- This should be fixed to website or check for more options -->
<meta
property="og:type" content="website" />
<!-- This should be fixed to website or check for more options -->
<meta
property="og:title" content="Your Webpage Title" />
<meta
property="og:description" content="Your Webpage Description" />
<!-- This is your current webpage url -->
<meta
property="og:url" content="https://www.yourwebsitename.com/" />
<!-- This is your current webpage url -->
<meta
property="og:site_name" content="YourWebsiteName" />
<!-- This is your image url -->
<meta
property="og:image" content="https://www.yourwebsitename.com/yourimage.png" />
<!-- This is your image url -->
<meta
property="og:image:width" content="64" />
<meta
property="og:image:height" content="64" />
<!-- This is your facebook app id visit https://developers.facebook.com/ and create app to get fb app id -->
<meta
property="fb:app_id" content="4000521313311357" />
<!-- This is your facebook app id visit https://developers.facebook.com/ and create app to get fb app id -->
<!-- fb and whatsapp tags -->Step 2 : Show Website Logo on Twitter on Share
To share your website on twitter paste the code given below in your head tags of your webpage.
<!-- twitter tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yoursitename" />
<meta name="twitter:creator" content="@yournameorauthorname" />
<meta property="og:url" content="http://yourwebsitename.com" />
<meta property="og:title" content="Your Webpage Title" />
<meta property="og:description" content="Your webpage description" />
<meta property="og:image" content="http://yourwebsitename.com/yourimage.png" />
<!-- twitter tags -->Step 3 : Show website logo on Browser’s Tab like Internet Explorer, Safari, Chrome, Opera etc.
If you want to show your website’s logo on browser’s tab then paste the code given below in between <head></head> tags of your website.
<link rel="shortcut icon" href="/images/favicon.ico"/>
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" href="/images/touch-icon-57.png" sizes="57x57"/>
<link rel="apple-touch-icon" href="/images/touch-icon-72.png" sizes="72x72"/>
<link rel="apple-touch-icon" href="/images/touch-icon-76.png" sizes="76x76"/>
<link rel="apple-touch-icon" href="/images/touch-icon-114.png" sizes="114x114"/>
<link rel="apple-touch-icon" href="/images/touch-icon-120.png" sizes="120x120"/>
<link rel="apple-touch-icon" href="/images/touch-icon-144.png" sizes="144x144"/>
<link rel="apple-touch-icon" href="/images/touch-icon-152.png" sizes="152x152"/>
<!-- Windows 8 Tiles -->
<meta name="msapplication-TileImage" content="/images/touch-icon-144.png"/>
<meta name="msapplication-TileColor" content="#652D8A"/>
<meta name="application-name" content="The MatriXFiles" />
<!-- Internet Explorer 11 Tiles -->
<meta name="msapplication-square70x70logo" content="/images/tile-70.png"/>
<meta name="msapplication-square150x150logo" content="/images/tile-150.png"/>
<meta name="msapplication-wide310x150logo" content="/images/tile-310.png"/>
<meta name="msapplication-square310x310logo" content="/images/tile-310.png"/>
<!-- For iPad landscape splash screen -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/images/apple-splash-screen-1024x748.png"/>
<!-- For iPad portriat splash screen -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/images/apple-splash-screen-768x1004.png"/>
<!-- For iPhone, iPod high resolution portriat splash screen -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/images/apple-splash-screen-640x960.png"/>
<!-- For iPhone, iPod standard resolution portriat splash screen -->
<link rel="apple-touch-startup-image" sizes="320x480" href="/images/apple-splash-screen-320x480.png"/>That’s it Now open your website in mobile or desktop browser, check your website logo on browser’s tab, share on social medias and see your website logo.
Code Explanation:
- In step 1 we used the OpenGraph you can read in detail here.
- In step 2 we used the Twitter Graph you can read in detail here.
- To show logo on browser’s tab we used some link and meta tags in step 3. Your image resolution should be exact same(i.e. 200X200 px) given in step 3 link and meta tag sizes.
- To create the Facebook app id go to https://developers.facebook.com. Then create your app and get app id.
- Your image or icon should be less than 300 kb in size to share on WhatsApp or Any other social media.
- You can read in detail about Meta Tags and Link Tags.
- If you want to convert your png logo to favicon. Then visit https://favicon.io/favicon-converter/.
- For Whatsapp or Facebook clean shared cache here.
You can apply these tricks on your any website like WordPress, HTML, Laravel, NodeJS or any other CMS or Frameworks. Just need to open your webpage in text editor. Then paste the code given above in between the head tags.
And if you want more tutorials and tricks about HTML then visit our HTML Page and follow us on facebook, twitter, tumblr, linkdedin and if you like this article then share this.