DarkMisery public free theme by Infade.net - Webdesign JeFf6o6.CoM

   Pleaseto become a member
Forgot Password? Retrive it here.
JeFf6o6.CoM :: Forums :: Web Design :: Tricks/Tips
<< Previous thread | Next thread >>
JumpList for your Pined Website in Taskbar (IE 10 and Windows 7/8 Only)
Moderators: Jeff6o6, MurphyValent, EnglishBob, JeffsAssistant
Author Post
Fri Nov 12 2010, 05:41PM

Member: 1
Joined: 27-Dec 09
Posts: 15

Level 2
HP: 0/30
MP: 14/14
EXP: 5/8
Gold: gold4782
Spent: gold0
Ok lets get started first you will need two requirements.

1st Requirement: *Windows 7 or 8*

2nt Requirement: *IE 10*

To download IE 10 click here!

Now thats outta the way lets begin

One of the best feature of IE 10 is website pinning. You can drag the favicon of any site from IE 10’s address bar and drop it on Windows 7 or 8's taskbar to pin it, just like you pin other applications. The common usage scenario will be to pin your favorite websites so that you can visit them any time with a click. But pinned websites are more than just taskbar bookmarks. A pinned site can behave like a desktop application with its own JumpList and icons. Better still – Microsoft allows website owners to customize how their Jumplist will look when pinned to the taskbar!

Take Facebook for example!

See how they added all the most common used features under the JumpList Task? pretty cool right?

So how do we as web designers add this to ours? Well get ready to learn! its quite simple due to meta is the answer!


Ok 1st we needa make some Favicons, If you don’t have a favicon for your website, it’s time to get one. The favicon is displayed next to the address bar in your browser and this is the same favicon that will appear when a visitor pins your site to their taskbar. Although favicons can be both images (GIF/PNG/JPEG) as well as Windows icon (ICO), only the ICO format is supported on pinned websites. If you use an image favicon on your site, it will not appear in the taskbar and get replaced by the default IE icon.

Upload that to your websites root.

then open your index page or anypage you want to display the favicon on in your favorite text editor, Notepad, Dreamweaver, or whatever and use the code below so it shows up in the address bar.


So the first step will be to get some .ICO based favicons. You can convert your existing favicons to .ICO Here. Microsoft recommends 32x32 or even 48x48 sized favicons

Now that we have thos, upload them to your server, example "Your_Domain/jumplist/favicon1.ico"

Moveing on to the JumpList

Open your index page and your favorite text editor and use these Meta codes below:

First is application-name. This tag specifies your pinned app's name.
<meta name="application-name" content="Name of your APP"/>

Then comes the msapplication-tooltip, which defines the mouse-over tooltip message.
<meta name="msapplication-tooltip" content="Your Message here"/>

Next up are a number of msapplication-task, each of which define a command that appears under ‘Tasks’. You can add up to 5 tasks for your website.
<meta name="msapplication-task" content="name=Page Name;action-uri=/Page URL/;icon-uri=/Favicon URL for the favcon.ico" />

<meta name="msapplication-task" content="name=Page Name;action-uri=/Page URL/;icon-uri=/Favicon URL for the favcon.ico" />

<meta name="msapplication-task" content="name=Page Name;action-uri=/Page URL/;icon-uri=/Favicon URL for the favcon.ico" />

<meta name="msapplication-task" content="name=Page Name;action-uri=/Page URL/;icon-uri=/Favicon URL for the favcon.ico" />

<meta name="msapplication-task" content="name=Page Name;action-uri=/Page URL/;icon-uri=/Favicon URL for the favcon.ico" />

Finally, there is shortcut icon, which defines the favicon your website is using aka to show your logo!
<link rel="shortcut icon" href="Your Website Favicon URL for the favicon.ico" />

Now save and upload the newly edited index page back into your servers root. then do a test and drag and pin your site to your taskbar and right click and look at the task list to see if it meets your likeing.

I have customized the JumpList for Jeff6o6.com.

Heres a Screen shot of it, and how it should look

Enjoy and I hope this helps with makeing your website more user friendly!
Back to top

Jump:     Back to top

Syndicate this thread: rss 0.92 Syndicate this thread: rss 2.0 Syndicate this thread: RDF
Powered by Jeff6o6's Forum System
This site is powered by e107,which is released under the terms of the GNU GPL License.
This website was created by Jeff6o6