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):
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
Anonymous
June 08, 2012
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 windowsAnonymous
June 08, 2012
Nice, you listened on our feedback! I now hope Facebook & Twitter will make use of it.Anonymous
June 08, 2012
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?Anonymous
June 08, 2012
Might it have been better to talk to other web browser makers to standardize a cross platform application icon markup?Anonymous
June 08, 2012
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!Anonymous
June 08, 2012
Good timing, was just looking for this before you posted it up after watching a video where it was briefly mentioned. :-)Anonymous
June 08, 2012
The comment has been removedAnonymous
June 08, 2012
Thank you soooooo much!!!!!Anonymous
June 08, 2012
@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.Anonymous
June 08, 2012
The comment has been removedAnonymous
June 08, 2012
The comment has been removedAnonymous
June 08, 2012
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.Anonymous
June 08, 2012
Why only 144x144px?? Please give the developer the possibility to have graphics that fill the whole tile.Anonymous
June 09, 2012
[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..Anonymous
June 09, 2012
A wonderful function, isn't it?Anonymous
June 09, 2012
PNG is a bitmap, why not also allow SVG to be used there? PNG makes it really cruncy on different resolutions...Anonymous
June 09, 2012
The comment has been removedAnonymous
June 09, 2012
The comment has been removedAnonymous
June 09, 2012
uninstling windows 7 gonna switch to linux this do not track stance goes to far being on by default will make it a useless fetureAnonymous
June 09, 2012
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.Anonymous
June 09, 2012
The comment has been removedAnonymous
June 09, 2012
Yay! Moar ms-prefixes! I lurv standardization!Anonymous
June 09, 2012
Great! Nice job!Anonymous
June 09, 2012
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.Anonymous
June 10, 2012
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.Anonymous
June 10, 2012
The comment has been removedAnonymous
June 10, 2012
The comment has been removedAnonymous
June 10, 2012
The comment has been removedAnonymous
June 10, 2012
Will check it out.Anonymous
June 10, 2012
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!Anonymous
June 11, 2012
We need our favorites/bookmarks to roam across all platforms: connect.microsoft.com/.../sync-favorites-with-skydriveAnonymous
June 11, 2012
The comment has been removedAnonymous
June 11, 2012
The comment has been removedAnonymous
June 11, 2012
PLEASE SOMEONE ANSWER THIS: WILL THE IE10 BE MORE LIGHT AND NOT SO HEAVY AS IE9 ??? thanksAnonymous
June 11, 2012
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.Anonymous
June 12, 2012
Why not use the same favicon, and just support more resolutions and include the ability to use PNG?Anonymous
June 12, 2012
The comment has been removedAnonymous
June 12, 2012
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.Anonymous
June 12, 2012
@ 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.Anonymous
June 12, 2012
@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!!!Anonymous
June 12, 2012
There is nothing to remedy it. Selecting half the word while selecting rest of the sentence is nor required 99.99% times.Anonymous
June 13, 2012
@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.Anonymous
June 13, 2012
link rel would be more suitable here as you can use the sizes attribute for different PNG sizesAnonymous
June 16, 2012
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, NYAnonymous
June 18, 2012
So this means FF, Chrome, MS-Word and every text/code-editor is doing it wrong ?Anonymous
June 18, 2012
@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-mouseAnonymous
June 21, 2012
@Malcolm, Microsoft Word has an option under File > Options > Advance > "When selecting, automatically select entire word". IE must have this option too.