IE Pinned Sites Part 1: What Are Pinned Sites?

In Internet Explorer 9, a new feature called pinned sites was introduced.  In this post, I’ll explain what pinned sites are.  In future posts in this series, I’ll discuss why they are worth implementing and how to do it using HTML and JavaScript. 

“Pinning” a site is dragging a webpage to your Windows 7 taskbar, desktop, or start menu, which creates a shortcut to that website and can expose additional functionality (like tasks in a jumplist).  Let’s focus on pinning to the Taskbar for now.  Note that only the end user can choose to pin a website; the website developer can’t force their site to be pinned because there are no public APIs to do this.  (We didn’t want websites to install themselves on everyone’s Taskbars.) 

There are three different ways for a user to pin a site:

1. Drag the website’s tab in Internet Explorer to the Taskbar. 
2. Drag the website’s favicon in the left-hand side of the address bar in Internet Explorer to the Taskbar. 
3. Drag a custom image on the webpage to the Taskbar.  (NOTE: this method does require custom coding by the website developer, who must decorate the image with class="msPinSite" .  For full instructions on how to do this, see this page.) 

Any website can be pinned, regardless of whether the web developer has coded pinning-specific functionality or not.  As an example, let’s consider Google, who has not implemented any pinning-specific code in their website.  I can pin Google by dragging the Google tab in Internet Explorer 9 to my Taskbar (which is method #1 above…but either method #1 or method #2 from above would work). 

Now, note that the last icon in my Taskbar is a Google icon (which matches Google’s favicon that you can see in the address bar above). 

So, what did we get?  When the Google site was pinned, its window was actually closed and reopened.  Specifically, the vanilla instance of Internet Explorer 9 that Google was running in closed, and a Google-branded version opened.  What are the changes in this updated browser UI? 

• The site’s favicon brands the browsing experience.   In the new UI, we see Google’s favicon in 4 different places!  (I’ve highlighted them with red arrows in the picture below.) 

• Selecting the top left favicon navigates users to the initially pinned page, like a “Home” button.   To try this out, you can type a search query into Google and get a new page with a list of results back.  Now click on the top left favicon; it will take you back to https://www.google.com. 

• The back and forward navigation buttons are color-coded based on the dominant color of the favicon.   This is actually less compelling for Google, because their favicon is a multi-color icon (try pinning a site like https://www.cnn.com which has a single true dominant color of red, and it looks really cool).  If you look closely at the Google favicon, you will see it contains two small blobs of blue, one small blob of red, one small blob of yellow, and a larger blob of green.  Because there is the most green in the icon, IE will automatically choose green as the “dominant color”, and it colors the back and forward navigation buttons that shade of green.  (This behavior can be overwritten by custom code as well, which I will talk about in a later post.) 

• The pinned site will get some default jumplist tasks that apply to all websites.   To access the jumplist, right-click on the Taskbar icon.  You will see 4 items, like in the picture below.  The Task “Start InPrivate Browsing” will launch an instance of the Google pinned site in private mode (so IE doesn’t store any data from your browsing session; for more info, see https://windows.microsoft.com/en-XM/windows-vista/What-is-InPrivate-Browsing).  Clicking on “Google” will launch the pinned site.  “Unpin this program from taskbar” will remove Google from my taskbar as a pinned site.  “Close window” will close the running instance of the Google pinned site. 

 

Remember, we got all of this functionality without the web developer having to code anything explicitly for site pinning.  But, the web developer can take advantage of pinned site functionality by using the msSiteMode API.  With this API, developers can have their websites tap into the Windows 7 taskbar functionality, and add jumplist tasks, overlay icons, thumbnail toolbar buttons, and flashing taskbar buttons.  I’ll talk more about how to implement these in upcoming blog posts in this series.  For now, let me show you an example of pinning a customized site.  Let’s take Bing, which has some custom jumplist tasks. 

I’ll pin Bing by dragging its favicon from the address bar in IE to the taskbar (method #2 from above, since we already used method #1 to pin Google). 

After you’ve pinned the site, note the updated browser UI:

Bing has all of the same default pinned-site coolness that we saw with Google.  In the screenshot above, note the favicon branding, the Bing “Home” button in the upper left-hand corner, and the color-coded back and forward navigation buttons that match the Bing orange perfectly (see how nice it looks when the favicon truly has one dominant color?).  In addition, Bing has the same default jumplist as Google, plus the Bing developers have chosen to implement additional items in the Bing jumplist.  Right-click the Bing icon in your taskbar to see the jumplist. 

The four bottom items in the jumplist are the default items which are available on any pinned site, and have the same functionality that we just discussed in the Google example.  In addition, the Bing website developers chose to surface five common tasks that people use Bing for: to search for Weather, Finance, News, Maps, and Travel.  If you click on any of these items, it will take you straight to the Bing subsite for that information.  For example, if I click on “Weather”, I am taken to a page with detailed weather information for my area. 

Imagine the possibilities here!  For your company’s website, you could surface items that you want to highlight (how to contact us for an appointment, special sales and deals for an ecommerce site, mortgage calculator, healthcare analysis tools, etc.) in a jumplist.  One of the best (and simplest) uses of a jumplist task is “Go to online help/FAQ page”.  By making this more visible in a jumplist, you may save a lot of money in support calls! 

Finally, you might be wondering what happens under the covers when the end user pins a site.  First of all, a pinned site is still surfacing content from the actual online website.  So if my internet connection went out, I couldn’t access https://www.bing.com through my Bing pinned site (other than perhaps a cached page).  Secondly, there is a file stored locally on the end user’s machine to support each pinned site.  When I pin a site, it creates a *.website file in C:\Users\jennmar\AppData\Local\Microsoft\Internet Explorer\Pinned Sites. 

In the next blog post, I’ll discuss why pinned sites are valuable, and then in the rest of the series, I’ll jump into the technical details of how web developers can customize their sites to get this functionality. 

 

Other Blog Posts in this Series

IE Pinned Sites Part 1: What Are Pinned Sites?

IE Pinned Sites Part 2: Why Implement Pinned Sites?

IE Pinned Sites Part 3: How to implement basic site properties

IE Pinned Sites Part 4: How to implement Jump List Tasks

IE Pinned Sites Part 5: How to implement dynamic Jump List Categories

IE Pinned Sites Part 6: How to implement Overlay Icons

IE Pinned Sites Part 7: How to implement Thumbnail Toolbar Buttons

IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button

IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers

IE Pinned Sites Part 10: Pinned Site Resources

Comments

• Anonymous
  May 08, 2011
  Please change the default of dragging the address of a site to the desktop (or any folder) to create a standard URL shortcut like everything else does and like IE 8 and below do.   If I want to pin a site, then it should be the taskbar.  Anywhere else and it doesn't make any sense and frustrating.  I create shortcuts to sites to my desktop all the time and the new ie9 behavior is annoying.

• Anonymous
  June 27, 2011
  The comment has been removed

• Anonymous
  August 02, 2011
  @Bob - I focus on pinning to the Taskbar in this article.  It sounds like you don't care for the behavior with pinning to the desktop - I'm sorry!  You can make a feature request to the IE team to change this at connect.microsoft.com/ie.   @Crubb - I try to answer your exact question "Why bother adding that?" in this post: blogs.msdn.com/.../ie-pinned-sites-part-2-why-implement-pinned-sites.aspx

• Anonymous
  September 19, 2011
  Thanks i was trying to figure that out.

• Anonymous
  January 11, 2012
  It is very good .... I use other time to finish reading the Other Blog Posts. Many thanks.

• Anonymous
  April 10, 2012
  Why make one's websites specific to a browser. Looks like a new batch of interns have hatched at Microsoft  who haven't  learnt the  lessons of Browser compatibility. To paraphrase  the bard: 'A curse on all your houses for those who add browser specific features!'

• Anonymous
  October 17, 2013
  Hmmm it seems that your whole concept, or, more likely Microsoft's is flawed. Your linked article lists "increased traffic, others are doing it, closer relationships with the users" as the main arguments for doing this, if I may paraphrase. I gave the thing a try, and was rejected. The reason? Here it is..."There is currently a lack of community demand for this add-on scenario." So, I should do this to get more traffic, but only sites that are well known enough can be accepted. (more well-known than the pinned sites feature I'd bet). What pages get approved, and would they actually get traffic? Let's see, Amazon, Twitter, etc. They aren't GETTING traffic, I would be willing to bet a decent amount of money they are PROVIDING it. And since I can't get approved, the whole thing just is reminding me of how I am on the outside looking in. FAIL