Enable your website to support jumplist of win7 and pinned sites of ie9

Ie9 introduces the new concept of pinned sites. Pinned sites allows users to "PIN" websites like Windows applications on the Windows 7 taskbar. You can directly click the icon on the taskbar to open the website. You can use the jump list to directly access various functions of the website, you can even float the task bar icon to complete some tasks (such as playing and stopping videos on the website ). As you can see,Ie9 is trying to narrow down the differences between websites and Windows applications, making websites the main character of Windows desktop..

Click the CNN icon to open the pinned site. You can see the CNN Website icon in the upper left corner of the window. The browser's "Forward" and "back" buttons are highlighted in red. This makes the user feel that I am using cnn.com instead of IE. Websites are the main character.

 

Next, let's go back to the questions that web developers are concerned about: if the user "nailed" your website, how does ie9 decide the icon in the upper left corner of the IE window and the win7 taskbar, and how to determine the color of the forward and backward buttons? Can I customize it as a webmaster?

The answer is:
 
Ie9 uses the favicon of your website as the icon of the IE window and the win7 taskbar. (If you do not know favicon, see Encyclopedia: http://baike.baidu.com/view/1237286.htm ). If favicon. ICO contains an icon of 32x32 size, ie9 uses this icon. If the size is only 16x16, ie9 will add a white border around it.

Here is one of my websites:

As you can see, the CNN's forward/backward button color is dark red; The Shenzhen elite school button is pink, very similar to the favicon color. This is because ie9 determines the forward/backward button color based on the main favicon color. The main color is calculated by an image fuzzy algorithm and should be correct in most cases. If you want to customize the color, you can add it to the website code.Msapplication-navbutton-colorName meta tag. The following sample code defines favicon and customizes the forward/backward button to Black:

<Meta name = "msapplication-navbutton-color" content = "black"/>

Note: color definition supports any HTML color identifier.

Summary: To make your website better support ie9 pinned sites, add a 32x32 (or even 48x48) favicon to your website and add the meta tag of msapplication-navbutton-color.

Jumplist is an important function of Windows 7. It is designed to provide more functions for a program for your convenience.

The following figure shows the effect of jumplist I added to my website:

So how does one add the jumplist function? In fact, it is very simple. You only need to add several "meta" tags to the website code:

1 <meta content = "Shenzhen elite schools" name = "Application-name"/>
2 <meta content = "name = excellent course; action-uri =/course.html; icon-uri =/favicon. ICO" name = "msapplication-task"/>
3 <meta content = "name = famous teacher team; action-uri =/html_newslist/teachers.html; icon-uri =/favicon. ICO" name = "msapplication-task"/>
4 <meta content = "name = school environment; action-uri =/html_newslist/schoolenvironment.html; icon-uri =/favicon. ICO" name = "msapplication-task"/>
5 <meta content = "name = school honor; action-uri =/honor/honors.html; icon-uri =/favicon. ICO" name = "msapplication-task"/>
6 <meta content = "name = Contact Us; action-uri =/about/contactus.html; icon-uri =/favicon. ICO" name = "msapplication-task"/>

The ICO icon, text information, and jump address of each menu item can be customized.

That's all !!