Pinning gives your site a front row seat.

Your site feels more like a native app in Internet Explorer 9 through pinning. Discover a new way to get more results from your Windows 7 users on the web, reaching nearly 35% in the USA and over 21% worldwide.

Add pinning to your site today:

Design it for me in minutes!

Design it for me in minutes!

1Create a hi-res favicon
2Add a Jump List
3Set-up Notifications
4Use thumbnail preview controls
5Let users discover it
6Measure your success
7Share and promote

Grow engagement by 50% when your site is pinned

Pinning gets powerful results

When users pin your site, they visit more often, spend more time and go deeper. That means you get more site impact, like ad revenue, purchases, paid subscriptions or whatever you want your users to do more of. Start with the best parts of your site and then use pinning capabilities to grab attention and pull your users in.

Pinning idea starters

Use these quick idea starters to see how to get the most out of your site with pinning:

Let's Get Started

Legal Notice: Any code provided on this site is "sample code" subject to the MSDN Terms of Use. Using this code means you agree to it.

Taking advantage of pinning on your site is easy. All the HTML and JavaScript code you need is here. Or use the pinify jQuery plugin to make it even easier.

Develop it with a few lines of code

Create a hi-res favicon

Get the Code

Your site's logo lights-up on the Windows taskbar when it’s high-resolution. When users pin your site, they become your most loyal customers. Give them a one-click experience that brings them back again and again. Convert your current logo into a favicon here into all the sizes you’ll need in minutes and a few lines of code.

Click on the gears to the left to use x-icon editor and get the basic code for enhancing your site with pinning. Want some examples? See other sites below.

Examples

Page loading...

Get the best experience with Internet Explorer 9

Based on your current browser, you are not seeing all that X-Icon Editor has to offer. Learn more about Internet Explorer 9 for Windows Vista and Windows 7.

Get from 32x32 Clear

Clear

Import

Edit

64x64

32x32

24x24

16x16

Preview Export

Upload

Uploading...

64x64

32x32

24x24

16x16

Ok Cancel

Step 1: Upload your image.
Supported formats are jpg, gif, bmp, png and ico.

Step 2: Crop your image.
Supported all formats but icons.

Step 3: Select the sizes of the image to be exported.
At least one size must be chosen.

Step 4: Click "Ok" to import your image.

Please wait...
(icon being created)

Your icon has been created correctly. Using the button below, you can open the preview in a new browser window.

Preview icon

Please wait...
(icon being created)

Your icon has been created correctly.

Export your icon

Define the Favicon

To indicate that the icon is available to the browser, use the <link> tag in the <head> element of the page, pointing to the location of the favicon:

Optimize Performance

In order to optimize network performance, please use the following best practices:

Specify caching behavior in the HTTP header of the resource (IE9 respects max-age and expires date)
Compress the icon to minimize its size (ex. GZIP)

Current size	Compressed Size (estimated)

Please wait...

Your icon is empty. Please import an image or edit the icon before proceeding.

HTML
jQuery (pinify)

<!-- Add this code into the <head> tag of your HTML document -->

<!-- Make sure the href of the link tag points to the icon you created -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<meta name="application-name" content="Build My Pinned Site" />
<meta name="msapplication-starturl" content="http://buildmypinnedsite.com" />
<meta name="msapplication-navbutton-color" content="#3480C0" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="Start Build My Pinned Site" />

<!-- Include jQuery via the Microsoft CDN-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" 
    type="text/javascript" ></script>

<!-- Include the pinify jQuery plugin -->
<script src="jquery.pinify.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){

        // Here we're adding calling pinify and passing it a set of options
        // pinify will then automatically create the correct <meta> tags and 
        // insert them into the head of your document

        $("head").pinify({
            applicationName: "Build My Pinned Site",
            favIcon: "/favicon.ico",
            navColor: "#3480C0",
            startUrl: "http://buildmypinnedsite.com",
            tooltip: "Start Build My Pinned Site",
            window: "width=1024;height=768"
            });

            // pinify() can be called with no parameters,
            // if it is, the plugin will use current information available
            // to the browser to set the needed values.

        });

</script>

How to use this code.

Use HTML for basic pinning

Upload the favicon (.ico) files that you created above to your site's server
Use the <link> tag (line 4) to point your site to the favicon you created
Use the optional <meta> tags to define how your site should behave when a user pins it:
- application-name (line 5): Users see this in when they hover over the Windows Taskbar
- msapplication-starturl (line 6): When a user pins your site, this is where they always start from (like your home page)
- msapplication-navbutton-color (line 7): Make the browser feel more like your site by choosing colors to match your favicon.
- msapplication-window (line 8): Indicate if you want the window to be a specific size
- msapplication-tooltip (line 9): Users see this in their Windows Start Menu or Desktop
Copy and paste the code above into the HTML <head> tag on your site
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about Declaring Site Metadata on MSDN.

Use jQuery for basic pinning

Download the pinify jQuery plugin and upload to your site's server
Use the jQuery favIcon option (line 18) above to point your site to the favicon you created
Use the optional jQuery code to tell with your site how it should behave when a user pins it:
- applicationName (line 17): Users see this in when they hover over the Windows Taskbar
- navColor (line 19): Make the browser feel more like your site by choosing colors to match your favicon.
- startURL (line 20): When a user pins your site, this is where they always start from (like your home page)
- tooltip (line 21): Users see this in their Windows Start Menu or Desktop
- window (line 22): Indicate if you want the window to be a specific size
Copy and paste the code above. Place the code right before the closing <body> tag of your site’s HTML or copy into your own document.ready function
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Update the plugin settings for your site or remove the settings altogether and Pinify will pull information from your site to generate the pinning <meta> tags
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.

Now your site is ready to take advantage of pinning. Follow the steps below to add more functionality (and get more results from the user's that experience it):

Add a Jump List

Get the Code

Your site is more than a home page. You have great content but users don’t always get to it. Inspire them to go deeper with Jump Lists. There are two types:

Static Jump List: Use these to promote the most common places you want your users to go
Dynamic Jump List: Use these to get creative, pulling your users in with the latest articles, personalized deals, or trending topics

You may also use the x-icon editor from the previous step to create your Jump List icons.

Click on the gears to the left to get the basic code for adding a Jump List.

Examples

<!-- Each meta tag below adds a Static Jump List item to the
 Tasks list on our pinned site's Jump List menu -->
	
<meta name="msapplication-task"
content="name=Develop for Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/startdeveloping;
icon-uri=/favicon.ico" />
	
<meta name="msapplication-task"
content="name=Attend a Web Camp;
action-uri=http://www.beautyoftheweb.com/#/camps;
icon-uri=/favicon.ico" />
	
<meta name="msapplication-task"
content="name=Download Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/download;
icon-uri=/favicon.ico" />

// Make sure jQuery and pinify are included
// The tasks array below adds Static Jump List items to the Tasks list
// on our pinned site's Jump List menu
$("head").pinify({
    applicationName: "Build My Pinned Site",
    favIcon: "/favicon.ico",
    navColor: "#3480C0",
    startUrl: "http://buildmypinnedsite.com",
    tooltip: "Start Build My Pinned Site",
    window: "width=1024;height=768",
        tasks: [{
            'name': "Develop for Internet Explorer 9",
            'action': "http://www.beautyoftheweb.com/#/startdeveloping",
            'icon': "/favicon.ico"
            },
            {
            'name': "Attend a Web Camp",
            'action': "http://www.beautyoftheweb.com/#/camps",
            'icon': "/favicon.ico"
            },
            {
            'name': "Download Internet Explorer 9",
            'action': "http://www.beautyoftheweb.com/#/download",
            'icon': "/favicon.ico"
            }]
});

How to use this code.

Use HTML to add a Static Jump List

Upload any favicon (.ico) files that you created above to your site's server
Create a <meta> tag for each Jump List task you would like to add to your site.
Each <meta> tag should have a name attribute set to msapplication-task and a content attribute that contains the following parts:
- name (line 05): The task name that appears in the Jump List.
- action-uri (line 06): The address that is launched when the item is clicked. (full or relative path)
- icon-uri (line 07): The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Copy and paste the code above into the HTML <head> tag on your site just below the <meta> tags from Step 1
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about Declaring Site Metadata on MSDN.

Use jQuery to add a Static Jump List

If you haven't, download the pinify jQuery plugin and upload to your site's server
Add the tasks option to the pinify method from Step 1 or copy and paste the code above.
To add a task, add an object to the tasks array with the following properties:
- name (line 12): The task name that appears in the Jump List.
- action (line 13): The address that is launched when the item is clicked. (full or relative path)
- icon (line 14): The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Copy and paste the code above or update your existing pinify function options. Place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.

Dynamic Jump Lists

JavaScript
jQuery (pinify)

<script type="text/javascript" charset="utf-8">
// In the example below, we're going to generate a list of Pinning Steps to display
// in our Dynamic Jump List based on an HTML list of Pinning Steps here on buildmypinnedsite.com

// Since not every browser supports site pinning, we’re wrapping our code in a 
// try/catch statement to keep it from causing errors in other browsers.
// This is something you'll want to do anytime you use window.external methods
try {

    // First, we need to check if the browser is in already Site Mode
    if (window.external.msIsSiteMode()) {
        // Here we clear the Jump List to remove any existing items (optional)
        window.external.msSiteModeClearJumpList();
        // Next we're creating a Custom Jump List Category to hold our Dynamic Jump List items
        window.external.msSiteModeCreateJumpList("Build My Pinned Site");

        // Here we're grabbing the list of Pinning Steps from an unordered list on this site
        // and placing them in an array
        var steps = document.getElementById("steps")
        var stepsArray = steps.getElementsByTagName("a");

        // Here we're looping through our array of steps in reverse.
        // Dynamic Jump List items are added at the top of the list,
        // in the reverse order from how they appear in the script.
        for (var i = stepsArray.length - 1; i >= 0; i--){

            var title = stepsArray[i].innerHTML;
            var href = stepsArray[i].href;

            // msSiteModeAddJumpListItem adds the actual Dynamic Jump List item
            // Here we're passing it a title, destination URL, icon path and an optional parameter
            // that tells the Jump List to open the destination URL in 
            // a new window or the current window
            window.external.msSiteModeAddJumpListItem(title, href, "/favicon.ico", "self");
        };

    }
} catch (ex) {
    // Fail silently.
}</script>

// Here we're creating an array to store our Pinning Steps
var stepsArray = [];

// In the example below, we're going to generate a list of Pinning Steps to 
// display in our Dynamic Jump List based on an HTML list of Pinning Steps 
// here on buildmypinnedsite.com

// Since we're using the pinify jQuery plugin, we do not need to use the
// try/catch blocks, pinify handles that for us

// Here we're grabbing the list of Pinning Steps from an unordered list on this site
// and looping through them
$("#steps a").each(data, function (key, val) {
    var $this = $(this);

    // The name, destination URL and icon of the current Pinning Step
    // is stored in an object
    var item = {
        'name': $this.html(),
        'url': $this.attr("href"),
        'icon': "/favicon.ico"
    };

    // That object is then added to the array we created to store our Pinning Steps
    stepsArray.push(item);
});

// Here we're calling pinify's addJumpList method
// It combines both the msSiteModeCreateJumpList and msSiteModeAddJumpListItem
// methods and creates a Dynamic Jump List using the tile and array of items below
$.pinify.addJumpList({
    title: "Build My Pinned Site',
    items: stepsArray
});

How to use this code.

Use JavaScript to add a Dynamic Jump List

Upload any favicon (.ico) files that you created for Jump List items above to your site's server
Since not all browsers support pinning, wrap any calls to the window.external object in a JavaScript try/catch (line 8)
To check whether a site is pinned and a Dynamic Jump List can be added we call msIsSiteMode(line 11)
Passing a Jump List title to msSiteModeCreateJumpList (line 15) creates a Dynamic Jump List. The title will show at the top of you list of items, but will not show until items are added.
msSiteModeAddJumpListItem (line 34) adds an item to a Dynamic Jump List. It requires the following parameters:
- name : The task name that appears in the Jump List.
- action-uri : The address that is launched when the item is clicked. (full or relative path)
- icon-uri : The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Dynamic Jump List items are added in reverse order of how they appear in the code
Copy and paste the code above. Place the code right before the closing <body> tag of your site's HTML copy into your own document.ready function
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to Create Dynamic Jump Lists.

Use jQuery to add a Dynamic Jump List

If you haven't, download the pinify jQuery plugin and upload to your site's server
To add a Dynamic Jump List, first create a JavaScript array to hold your Jump List items (line 02)
Populate the array with an object for each item. Each object in the array should contain the following properties:
- name (line 19): The task name that appears in the Jump List.
- url (line 20): The address that is launched when the item is clicked. (full or relative path)
- icon (line 21): The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Copy and paste the code above into a document.ready function. Modify to create your own Dynamic Jump List
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.

Set-up Notifications

Get the Code

How do you catch user attention when they’re not actively browsing your site? Pull them with a timely notification. Use an icon overlay when new content is available or flash the taskbar to show when user action is requested just like an app.

You may also use the x-icon editor from the previous step to create your overlay icons.

Click the gears to the left to get the code for notifications.

note: for notifications to appear the pinned site must be running and minimized.

Examples

JavaScript
jQuery (pinify)

<script type="text/javascript" charset="utf-8">
// This code creates a two second timeout that adds a custom overlay icon
// and triggers a notification.
// The timeout is just for demostration and is not required
window.setTimeout(function () {
    window.external.msSiteModeSetIconOverlay("/icons/overlay.ico", "Example Notification");
    window.external.msSiteModeActivate();
}, 2000);
</script>

// This code creates a two second timeout that adds a custom overlay icon
// and triggers a notification.
// The timeout is just for demostration and is not required
window.setTimeout(function(){
    // Here we're adding the custom overlay icon
    $.pinify.addOverlay({
        title: "Example Notification",
        icon: "/icons/overlay.ico"
    });
    // Calling flashTaskbar, flashes the Taskbar
    $.pinify.flashTaskbar();
}, 2000);

Give it a try

Pin the site and click the button below to see an overlay icon appear.

Pin the site and click the button below, tab to a new window and wait a few seconds to see the Taskbar flash.

How to use this code.

Use JavaScript to add a Notification and Custom Icon Overlay

Create and upload a custom overlay icon (.ico) to your site's server
Wrap any calls to the window.external object in a JavaScript try/catch and check whether the user has the site pinned using msIsSiteMode
Use msSiteModeSetIconOverlay (line 06) to add a custom icon overlay (.ico) to your pinned site, by passing it a full or relative path to the custom overlay icon.
To trigger the Taskbar notification simply call msSiteModeActivate (line 07)
Copy and paste the code above into the try/catch from Step 2 or add to your own functions
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to add Notifications and Custom Icon Ovelays.

Use jQuery to add a Notification and Custom Icon Overlay

Create and upload a custom overlay icon (.ico) to your site's server
Call $.pinify.addOverlay (line 06) to add a custom overlay icon. $.pinify.addOverlay requires the following options:
- title (line 07): The task name that appears in the Jump List
- icon (line 08): The icon (.ico) that appears in the lower right of the site's Taskbar icon (full or relative path)
To trigger the Taskbar notification simply call $.pinify.flashTaskbar (line 11)
Copy and paste the code above and place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about How to add Notifications and Custom Icon Ovelays.

Use thumbnail preview controls

Get the Code

Take your site a step farther towards a native app by allowing your user to control the site from outside the browser. Make it more social or media-friendly.

You may also use the x-icon editor from the previous step to create your thumbnail preview controls.

Click the gears to the left to get the basic code for adding thumb bar controls.

Examples

JavaScript
jQuery (pinify)

// Declare button variables
var btn1, btn2;

// This handler will dispatch the event by using the button ID
function onButtonClicked(btn)
{
    switch (btn.buttonID) {
        case btn1:
            // Handle button 1 click
            // Trigger Twitter sharing functions here
            break;
        case btn2:
            // Handle button 2 click
            // Trigger Facebook sharing functions here
            break;
    }
}

// Here we're storing the button ID in our variables to be referenced in the callback
// We've assigned each button its own icon and set the tooltip text
btn1 = window.external.msSiteModeAddThumbBarButton("/icons/twitter.ico","Twitter");
btn2 = window.external.msSiteModeAddThumbBarButton("/icons/facebook.ico","Facebook");

// Add an event listener
document.addEventListener("msthumbnailclick", IEPin.onButtonClicked, false);

// To display the buttons we call msSiteModeShowThumbBar
// NOTE: These toolbar buttons will exist for as long as the pinned site is open
window.external.msSiteModeShowThumbBar();

// Here we're calling the pinify function to create Thumbnail Preview Controls
$.pinify.createThumbbarButtons({
    buttons: [{
        icon: "/icons/twitter.ico", // Thumbnail preview icon URL
        name: "Twitter", // Thumbnail tooltip
        click: function () {
            // Trigger Twitter sharing functions here
        }
    },
    {
        icon: "/icons/facebook.ico",
        name: "Facebook",
        click: function () {
            // Trigger Facebook sharing functions here
        }
        }]
});

How to use this code.

Use JavaScript to add Thumbnail Preview Controls

Create and upload Thumbnail Preview Control icon(s) (.ico) to your site's server
Wrap any calls to the window.external object in a JavaScript try/catch and check whether the user has the site pinned using msIsSiteMode
Use msSiteModeAddThumbBarButton (line 21) to add a Thumbnail Preview control. msSiteModeAddThumbBarButton requires the following parameters:
- icon: The path to the icon (.ico) that appears in preview pane (full or relative path)
- tooltip: The button name, which is displayed as a tooltip on hover.
Store the result of each msSiteModeAddThumbBarButton (line 21) call to keep a reference to the button. You'll need the reference to determine which button was clicked
To capture when a user clicks a Thumbnail Preview Control, create an event listener that listens for the msthumbnailclick event (line 25)
The msthumbnailclick event returns the button clicked. The .buttonID property and your button reference variables can be used to determine which button was clicked (line 05)
Copy and paste the code above into the try/catch from Step 2 or add to your own functions
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to Create Thumbnail Toolbars.

Use jQuery to add Thumbnail Preview Controls

If you haven't, download the pinify jQuery plugin and upload to your site's server
Create and upload Thumbnail Preview Control icon(s) (.ico) to your site's server
Call $.pinify.createThumbbarButtons (line 02) to add Thumbnail Preview Controls. Add the buttons option to begin adding a list of buttons
To add a button, add an object to the buttons array with the following properties:
- icon (line 04): The path to the icon (.ico) that appears in the preview pane (full or relative path)
- name (line 05): The button name, which is displayed as a tooltip on hover.
- click (line 06): The callback function that will execute when the user clicks a button.
Copy and paste the code above and place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about How to Create Thumbnail Toolbars.

Let users discover it

Get the Code

If pinning delivers up to a 200% increase in site engagement, then you want users to discover how to do it. And when you show them on your site, up to 35% do it. Use a jQuery plug-in to have it test-ready in minutes and only show it to IE9 users. Choose one of our ideas below to customize it with your our site logo.

Click the green buttons below to turn on the examples live in this site.

HTML/jQuery
jQuery (pinify)

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$.fn.pinable({
			closeTitle : 'Close', // default close title
			containerElement : 'body', // element that pinning html will be prepended to
			cookieName  : 'example_name', // name of cookie; default is iePinning_yourdomain.com
			cookieLength : 30, // in days; default is 30 days
			debug : false, // debug mode; forces the banner to always show, even across browsers
			discStyle : 'toast', // discoverability style; options are toast, topHat and pushUp
			dragAlt : 'Drag me!', // default drag icon alt text
			elementId : 'pinning-discoverability', // Id of banner container that will be injected
			logoPath : '/discoverability/images/logo.png', // path to the 32px x 32px logo file
			message : 'Drag this to your Windows taskbar to enable special IE9 Features.',
			slideDuration : 'fast', // change the slide speed
			useCookie : true // toggles cookies on/off; default is on
		});
	});
</script>

// Here we're calling the pinify function with the 'pinTeaser' parameter to
// add a teaser to the site
$("#topHatContainer").pinify('pinTeaser', {
    type: "topHat",
    pinText: "Unlock the hidden powers of this site with a click and a drag.",
    style: {
        backgroundImage: "images/toolbar-bg.png",
        closeButtonImage: "images/toolbar-bg.png"
    }
});

How to use this code.

Use HTML/jQuery to help users discover pinning on your site

Create and upload a 32px x 32px PNG version of your logo to your site's server
Download our Discoverability assets, unzip, and upload to your site. Our discoverability assets require jQuery.
Include discoverability.css in the HTML <head> tag of your site
Include jquery.pinable.js before the closing HTML <body> tag of your site
Copy the provided HTML from one of the 3 example files directly under the opening HTML <body> tag of your site's HTML
Add a call to pinable(); (line 3) in your document.ready or copy and paste the example above
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to help users discover pinning on your site.

Use jQuery to help users discover pinning on your site

If you haven't, download the pinify jQuery plugin and upload to your site's server
Create and upload a 32px x 32px PNG version of your logo to your site's server
Add a div right after the opening HTML <body> tag of your site. Make sure to give the div an id
- type (line 04): The type of discoverability teaser to add. Options are: topHat, brandedTopHat, and doubleTopHat
- pinText (line 05): The text to display in the teaser.
- style (line 06): Allows you to set the right and left background images by passing an image path using the rightBackgroundImage and leftBackgroundImage respectively.
Copy and paste the code above and place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about How to help users discover pinning on your site.

Measure your success

Now that you have implemented pinning on your site, measure the results it gets in a few simple steps. Use your current tracking system to make implementation as simple as possible. If you don’t have one currently, we’ll show how to set a new one up. WebTrends, Google Analytics, and Omniture are all able to track these Internet Explorer 9 pinning capabilities and compare them.

Show the White Paper

Share and promote

Want to put your site where 25 million users monthly visit? Give it a presence on the IE Gallery where top sites like Facebook, Twitter, and eBay are. Share the experience you’ve built here.

Submit Site to IE Gallery