IE9 - Pinning of image

In this article we will explore how to use image to pin site in IE 9.

Let's see how we can do this.

Step 1: Add favicon to your web site.

<link rel="shortcut icon" href="../../images/sumit-fav.ico" type="image/vnd.microsoft.icon" />
 Step 2: Add a image tag with class msPinSite.

<img id="pinImage" class="msPinSite" src="../../images/sumit.png" title="Drag this image to your taskbar to pin dotnetspeaks.com " /> 

Step 3: Using below javascript, one can hide the image if the site is already pinned in the taskbar using window.external.msIsSiteMode().

 <script type="text/javascript">     var initializePinnedSite = function() {
          try {
               if (window.external.msIsSiteMode()) {
                    document.getElementById("pinImage").style.display = "none";
               }
               else {
                    document.getElementById("pinImage").style.display = "inline-block";
               }
     }
     catch (e) {
          //Pinned Site API not supported.     }
}
window.onload = initializePinnedSite;

</script>

If you are using IE 9, you can drag the image on the left hand side of this website to pin it.

Once you pin the site you will notice that back and forward button color in the title bar has changed.



This ends the article of pinning of image in IE9.