Pinning gives your site a front row seat.

Your site feels more like a native app in Internet Explorer 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.

Games Download
Media Download
News Download
Marketing Download
Shopping Download
Social Download
Sports Download

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

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" class="/favicon.ico" />
<meta name="application-name" content="Build My Pinned Site" />
<meta name="msapplication-starturl" content="buildmypinnedsite.com" />
<meta name="msapplication-navbutton-color" content="#3480C0" />
<meta name="msapplication-window" content=";" />
<meta name="msapplication-tooltip" content="Start Build My Pinned Site" />

<!-- Include jQuery via the Microsoft CDN-->
<script src="/img/spacer.gif">

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

Static Jump Lists

HTML
jQuery (pinify)

<!-- 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=www.beautyoftheweb.com/#/startdeveloping;
icon-uri=/favicon.ico" />
	
<meta name="msapplication-task"
content="name=Attend a Web Camp;
action-uri=www.beautyoftheweb.com/#/camps;
icon-uri=/favicon.ico" />
	
<meta name="msapplication-task"
content="name=Download Internet Explorer 9;
action-uri=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: "buildmypinnedsite.com",
    tooltip: "Start Build My Pinned Site",
    window: ";",
        tasks: [{
            'name': "Develop for Internet Explorer 9",
            'action': "www.beautyoftheweb.com/#/startdeveloping",
            'icon': "/favicon.ico"
            },
            {
            'name': "Attend a Web Camp",
            'action': "www.beautyoftheweb.com/#/camps",
            'icon': "/favicon.ico"
            },
            {
            'name': "Download Internet Explorer 9",
            'action': "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 overl