Windows Internet Explorer 9 introduces pinned sites, a feature with which you can integrate your websites with the Windows 7 desktop. With pinned sites enabled for a website, users can pin that site to the Windows 7 taskbar or add the site to the desktop or Start menu. Pinned sites enable easy access to favorite websites and add shortcut functionality similar to that found in Microsoft Windows applications.
The following code example uses meta elements to customize the pinned site shortcut with a name, tooltip, start URL, initial window size, and navigation button color.
- Name the Pinned Site for Windows
Without this rule, Windows will use the page title as the name for your application.
<meta name="application-name" content="Sample Title">
- Give Your Pinned Site a TooltipYou know — a tooltip. A little textbox that appears when the user holds their mouse over your Pinned Site’s icon.
<meta name="msapplication-tooltip" content="A description of what this site does.">
- Set a Default Page for Your Pinned Site
If the site should go to a specific URL when it is pinned (such as the homepage), enter it here.
<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true">
- Recolor Internet Explorer’s Controls Manually
IE9 will automatically use the overall color of your Pinned Site’s favicon to shade its browser buttons. UNLESS you give it another color here. Only use named colors (“red”) or hex colors (“#f00″).
<meta name="msapplication-navbutton-color" content="#f00">
- Manually Set the Window Size of a Pinned Site
If the site should open at a certain window size once pinned, you can specify the dimensions here. It only supports static pixel dimensions. 800×600 minimum.
<meta name="msapplication-window" content="width=800;height=600">
- Jump List (Right-Click) “Tasks”
Add Jump List Tasks that will appear when the Pinned Site’s icon gets a right-click. Each Task goes to the specified URL, and gets its own mini icon (essentially a favicon, a 16×16 .ICO). You can add as many of these as you need.
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name=”msapplication-task” content=”name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico”>