High Quality Visuals for Pinned Sites in Windows 8


Pinned Sites in Windows 8 describes how site developers can provide a site icon (favicon) for their sites’ pinned site tiles on the Windows 8 Start screen. Many of you shared feedback that you’d like to provide higher-resolution visuals to better depict your site brand on your users’ pinned site tiles. In Windows 8 Release Preview, you can to do that: we’ve added the ability for you to provide a PNG tile image and specify the tile’s background color.

Example

Below are examples of a pinned site tile using the site’s favicon and automatically determined color (left) and high-resolution PNG with custom tile color (right):

Default tile for the Fresh Tweets demoTile for Fresh Tweets demo following @BenThePCGuy

Markup

Meta tags specify the tile’s image and background color. Example:

<meta name="msapplication-TileImage" content="images/benthepcguy-144.png"/>

<meta name="msapplication-TileColor" content="#d83434"/>

Tile images must be square PNGs 144px by 144px. For best results, we recommend using a transparent background, not a background that matches the tile’s color. The tile color can be specified as a hex RGB color using CSS’s #rrggbb notation, via CSS color names, or by the CSS rgb() function.

See this behavior in action on our updated Fresh Tweets demo.

Note: IE10 only downloads the tile image when the user pins the site to his or her Start screen so sites don’t incur additional bandwidth costs.

Conclusion

Internet Explorer 10 enables Web developers to create high-quality site-centric visuals for pinned site tiles, allowing sites’ brands to be better reflected on the Windows 8 Start screen and look more visually integrated with the rest of the app and content tiles. Developers need provide only one high-quality icon that Windows 8 will scale as needed for devices running at different resolutions.

Sites can also share notifications and offer jump lists for quickly navigating around the site. See Pinned Sites in Windows 8 for how.

We look forward to you adding these simple features to your Web site to maximize their impact in Windows 8.

—Rahul Lalmalani, Program Manager, Internet Explorer

Comments (47)

  1. Anonymous says:

    Bug report in W8: Open links from others program in a "A new tab in the current Windows" doesn't work.

    It always open a new windows

  2. FremyCompany says:

    Nice, you listened on our feedback! I now hope Facebook & Twitter will make use of it.

  3. Anonymous says:

    No one cares. Where is our Win7 build? Will we even have a Win7 build, or can web developers finally start ignoring IE for real?

  4. Anonymous says:

    Might it have been better to talk to other web browser makers to standardize a cross platform application icon markup?

  5. Anonymous says:

    The comment form still needs to be fixed!!!!

    Where's the windows 7 version?!?!?

    Glad to see you didn't listen to all of our advice! (MSFT deaf ears syndrome)

    We also said don't clutter up the HTML of pages even more by adding new tags!!! We already have link tags for site fav icons etc. IOS has had this for years and all other vendors have followed…. Why generate new crud?!?!

    Finally, since next to none of the icons used by sites will use a white monochrome silhouette an neither will 3rd party apps… Won't the Windows 8 desktop just look like a cluttered mess?!?

    When will Microsoft be announcing that zero current windows phones and tablets can be upgraded to windows 8?!?! Even the ones bought today?!?!?!

    When will Microsoft announce that windows 8 tablets must run on Intel chips to be fully functional?!? And that the ARM tablets are NOT backwards compatible with ANY existing windows applications?!?!?!

    This is turning into a PR Disaster!!! Microsoft needs to come clean ASAP!

  6. Good timing, was just looking for this before you posted it up after watching a video where it was briefly mentioned. 🙂

  7. pmbAustin says:

    And will IE10-Metro be able to access and save Favorites/Bookmarks at release?  Because it's unusable to me unless/until it does… I'll be forced to desktop IE10 all the time.  Which would suck.

    And why can't users specify the color they want the tile backgrounds to be?  What if I want to color code my tiles?  All Desktop app tiles are blue, all games are orange, all media apps are green, etc?  

  8. Anonymous says:

    Thank you soooooo much!!!!!

  9. Anonymous says:

    @pmbAustin, you said "And why can't users specify the color they want the tile backgrounds to be?'

    If you ain't stupid, you would realize that the tile color is left to developer's discression as it indicate their ID. Its just like the favicon of a website.

    Remember, not everything of everything should be customizeable. Thats what linux gui does and thats what make it complicated and confuses the end-user. This is one of the reason why many people dont use Linux guis.

  10. Anonymous says:

    Metro apps were supposed to be able to support multiple DPI-related sizes, 100%, 140% and 180%, weren't they? If so, is there a possibility of providing higher-res versions of the tile icon?

  11. Quppa says:

    At least the 'Fresh Tweets Demo' icon seems to be rendered cleanly – the icons for Metro-style apps don't seem to snap to pixel boundaries, giving a nasty anti-aliasing effect (especially visible for the icons for the Video, Travel and Finance apps).

    I really can't get used to the lack of ClearType in the Metro environment – not all of us run high-DPI displays, and grayscale antialiasing looks noticeably inferior to subpixel antialiasing on my displays. The 'Fresh Tweets Demo' text just looks 'off'.

  12. Anonymous says:

    Why don't you use a default location for the image so that the webmaster doesn't have to include the meta tag in the code?

    I know it's only a few bytes, but still.

  13. Anonymous says:

    Why only 144x144px?? Please give the developer the possibility to have graphics that fill the whole tile.

  14. Anonymous says:

    [Bug while selection text with mouse]

    In IE, if you click in the middle of some text and press-and-hold Shift and click within that word, it would select the letters from the first click till the last click.

    Like in word "Microsoft", if your first click was between 'c' and 'r' and second click (while holding Shift key) between 'f' and 't', it would highlight 'rosof'.

    Having said that, if the second click is across the current word boundary, it would not respect the first click location, but consider it as a the start of the word boundary (or at the end, if second click is performed backward).

    For example, in the sentence "Microsoft is a software giant.", if your first click was between 'c' and 'r' of word "Microsoft" and second click (while holding Shift key) was after the letter 't' of the word "giant", it would highlight 'Microsoft is a software giant' instead of 'rosoft is a software giant'.

    Similarly, the position of second click is ignored and it jumps to word boundary..

  15. A wonderful function, isn't it?

  16. Anonymous says:

    PNG is a bitmap, why not also allow SVG to be used there? PNG makes it really cruncy on different resolutions…

  17. Anonymous says:

    So hold on… The website developer gets to choose the color of the tile on my desktop? – WTF!?!?

    If I'm going to be forced to use Metro I want all the tiles to share a common color scheme that lets tile colors compliment each other.  We better be able to override this when developers pick a color for a tile (retarded) when they can't see the colors or images on my desktop!!!!

    You might as well ask a blind man to coordinate the color of my car accessories without knowing what color my car is!!!

    OS design by commitee is asking for failure!

    More daily failures of the the Microsoft #ElCaminoOS #Windows8Fail

  18. pmbAustin says:

    @WindowsVista567, I assure you I ain't stupid.

    But having a mishmash of unrelated colors is kind of ugly and stupid.  If I want all my pinned websites to be purple, all my desktop apps to be green, all my "most used" apps to be red (to catch my eye), and everything else to be gray… why can't I?

    Adding to what Marlo said:  "If I'm going to be forced to use Metro I want all the tiles to share a common color scheme that lets tile colors compliment each other."

    If I want a muted "winter" color scheme on my Start Screen, why shouldn't I be able to do that?  The Image or Icon itself provides the branding.  The background color shouldn't belong exclusively to the developer.  It erases all the information that color can represent, and turns it into simple "noise".  Never mind having people with low vision or color blindness be able to select a scheme that works best for them… or for anyone to select a color scheme that works best for whatever background image they choose on their start screen.

    And no, allowing users to set the color would NOT make it too complicated.  There's PLENTY of room for a "set tile color" option on the app bar of the Start Screen.  It's a useful, common, and greatly desired customization that would NOT mess up the UI (quite the opposite) or be unintuitive, or in any way negatively affect Windows 8 or developers.

  19. Anonymous says:

    uninstling windows 7 gonna switch to linux this do not track stance goes to far being on by default will make it a useless feture

  20. Anonymous says:

    Microsoft, can you please stop reinventing all kinds of stuff? Why don't you pickup the long-existing apple-touch-icon? It's meant for EXACTLY this.

  21. Anonymous says:

    And why exactly 144px? The system should be able to pickup anything and scale it. Windows 8 is built for tablets, right? Then take care to consider high-DPI devices. 144px on a 10" 1920×1200 screen is not big enough, while 288px on a desktop is too big.

  22. Anonymous says:

    Yay! Moar ms-prefixes! I lurv standardization!

  23. Anonymous says:

    Do not force bad design (sorry make that blind design!) on users!

    Ensure that users can customize the color of the tiles in windows8! It will be incredibly annoying if this is locked down.

    Remember usability is the number one feature of software.

  24. Anonymous says:

    The "color issue": I think the favicon + auto-determined color is a much better approach than this. There's no need to introduce yet another set of platform-/browser-specific, non-standard-conform tags. C'mon guys, isn't there something more interesting to blog about than yet another Windows 8-only feature? The development of IE10 is already too Windows 8-specific; too many users of prior Windows versions (and also web developers) are currently left behind.

  25. Anonymous says:

    PS: By the way, the example you provided is a bit silly because now the website appears like it is a Metro-style app rather than a pinned website. Where do you draw the line here? I think richer content, or a live tile-appearance, whatever you name it, should be excluse to app tiles rather than supported for simple links to websites. Example: Pinned Twitter-website – favicon only. Twitter app – live tile notifications. Don't mix them up.

  26. Anonymous says:

    I'm a pretty big fan of IE10 in general, but whoever chose how to design this feature clearly has no idea how it will be used. Metro interfaces tend to be vector-based so they scale with resolution, so why did you not make this feature based on SVG? I can understand wanting the creation of icons to be easy, but the main reason no one uses SVG is because Windows never uses it.

    I can only imagine how ridiculous this feature will look on a 4k monitor (which will be out within the next year or so) when you have a nice-looking, vector-based UI with a large, awful-looking icon in one of the tiles.

    Come on Microsoft; your employees are smarter than this. Have some pride in your work.

  27. Anonymous says:

    Please resolve this BUG… connect.microsoft.com/…/attribute-selectors-in-print-preview-incorrectly-match-current-value-of-input

    If we are supposed to print the forms while preserving the input field styles, we have to use other browser. Microsoft is saying Won't Fix? Please don't screw it up anymore and resolve the existing issues on connect. There are hundreds of them reported on Connect. Don't make it an ego issue just do your job!!

  28. Anonymous says:

    Will check it out.

  29. Anonymous says:

    Wow Microsoft it looks like you've failed consumers before IE10 even gets out of Beta!

    I will not be upgrading if all of these issues are not resolved!

    I can't believe you are planning to ship another Vista failure!

  30. Anonymous says:

    We need our favorites/bookmarks to roam across all platforms: connect.microsoft.com/…/sync-favorites-with-skydrive

  31. Anonymous says:

    In using Windows 8, one of my first visual annoyances was all the tiles in my start menu (metro) that just had an icon in them.

    This has certainly taken us a step further to making our pinned websites more visually appealing, however as someone stated earlier, why have an arbitrary size of 144px x 144px, this means we still cant emulate some of the nice looking tiles that have images take up the whole tile

    I do like what you have done so far and i do like the metro tiles, but im greedy and want more, I want my website/web application to be a first class citizen on the metro start menu, just like the weather app or the music app or the pictures app

  32. Anonymous says:

    Where is the setting to turn Metro off in Windows 8? I've looked in all the settings but can't see how to turn it off!

    I have a desktop computer – therefore I have no interest or need for a metro interface that will only get in my way and stop me from getting things done.

  33. Anonymous says:

    PLEASE SOMEONE ANSWER THIS: WILL THE IE10 BE MORE LIGHT AND NOT SO HEAVY AS IE9 ???

    thanks

  34. Anonymous says:

    I think this is a good example of progressive enhancement. However some choices look quite brittle – the fixed size (what happens when we get higher res screens) and the use of the "msapplication-" prefix in the tag name. Other OS vendors might want to start using this data too. We shouldn't have to put a whole string of different tags for different OSs in pages, nor should we have to target a web page at a particular OS.

  35. Anonymous says:

    Why not use the same favicon, and just support more resolutions and include the ability to use PNG?

  36. pmbAustin says:

    From @Jessy: "We need our favorites/bookmarks to roam across all platforms: connect.microsoft.com/…/sync-favorites-with-skydrive"

    THIS.  Oh yeah, and we need access to them from within Metro IE-10.

    And we need the first experience of new users on IE-10 Metro to NOT be like THIS:  http://www.infoworld.com/…/ie10-windows-8-even-microsoft-cant-make-it-work-195293

    And we need for flash videos — all of them — to just work using the new embedded Flash player, which doesn't currently happen.  Many flash videos on pages that play fine in Win7 with IE9 and on Win8CP with IE10-Desktop, no longer play at all in IE10 (Metro or Desktop) in Win8RP.

  37. Anonymous says:

    In IE (any version), if you click in the middle of some text and press-and-hold Shift and click within that word, it would select the letters from the first click till the last click.

    Like in word "Microsoft", if your first click was between 'c' and 'r' and second click (while holding Shift key) between 'f' and 't', it would highlight 'rosof'.

    Now, if the second click is performed beyond the current word boundary, it will move the location of first click to at the start of the word boundary (or at the end, if second click is performed backward) in case the click took place somewhere in between the word.

    For example, in the sentence "Microsoft is a software giant.", if your first click was between 'c' and 'r' of word "Microsoft" and second click (while holding Shift key) was performed after the letter 'g' of the word "giant", it would highlight 'Microsoft is a software giant' instead of 'rosoft is a software g'

    FF doesn't have this issue. Please remedy it.

  38. Anonymous says:

    @ Xero: this is not a bug, it's a "feature". No, seriously – try to do the same selection with mouse hovering, to see what happens. The selection area is padded out, so you have full words selected. The "feature" part is that you don't actually need to be precise when you want to select full sentences, because the selection auto-fills, even if you mis-click the beginning/end of the sentence.

    I can see why this is considered a bug, but this is actually one of the things I miss when I have to use Firefox or Chrome. But I also see why precise highlighting is a plus. So it needs to be made optional, not removed.

  39. Anonymous says:

    @Arieta – just because Microsoft messed it up does not mean it is a feature!  Microsoft copied the same mistake they made in Word when they did highlighting in IE and it is really annoying probably one of the key reasons why users have usability issues with IE.

    If I wanted to select the while word I would have… You gave me a precise selection tool (the mouse) and then ignore my actions… Thus it is 100% definately a bug.

    Speaking of bugs this comment form is f___ing annoying too! Why the %}^£€! Does it not save comments! I had to post this whole message 3 bl___y times!!!

  40. Anonymous says:

    There is nothing to remedy it. Selecting half the word while selecting rest of the sentence is nor required 99.99% times.

  41. pmbAustin says:

    @Xero, @Arieta, and @Malcom … there is a way to get precise highlighting:  Back the mouse off and then return to select, and it will "undo" the word-selection, and keep the precise endpoints.  It's hard to describe, but play with it a bit and you'll see it in action.  You sorta have to do it twice if you're trying to select the last half of word A, and the first half of word B.  Start like this:  click in the middle of word A and drag over to word B.  Suddenly all of word A is highlighted.  Back the mouse off back into word A, and it'll undo the word selection.  Now continue as you started into word B.  It'll "helpfully" select all of word B.  Just go past the end of the word a bit, and then back off to where you want to select.  Voila.

    Once you get used to it, it works okay.  I'd RATHER they did a "hold control to select whole words" or "start the select with a double-click to select whole words", but hey… at least it's POSSIBLE to do what you want.

  42. Anonymous says:

    link rel would be more suitable here as you can use the sizes attribute for different PNG sizes

  43. Anonymous says:

    I have been using Windows 8 and to me it simple and well thought out. I have been saving time and the program is efficient for the work that I need to have done. I say go forth and build the Windows 8 for the present and the future technology that is here already.

    Thanks again for the opportunity to try this program I am a satisfied customer

    Cordially,

    Ms. Marie Danais

    Brooklyn, NY

  44. Anonymous says:

    So this means FF, Chrome, MS-Word and every text/code-editor is doing it wrong ?

  45. Anonymous says:

    @pmbAustin, I would rather urge MSFT IE team to solve the problem, since we have multiple pointing inputs and the most precise one (the mouse) is having issues with precision.

    BTW, I echoed Real McCoy bug report on connect and according to MSFT they can't reproduce this issue!! connect.microsoft.com/…/bug-while-selecting-text-with-mouse

  46. Anonymous says:

    @Malcolm, Microsoft Word has an option under File > Options > Advance > "When selecting, automatically select entire word".

    IE must have this option too.