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:

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 allows 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

IEBlog