Pinned Sites in Windows 8

15 Feb 2013

The Icon Handbook has a whole chapter devoted to creating Favicons, and the various options you can provide for different contexts, but with the subsequent release of Microsoft’s new OS, Windows 8, there’s another big one for the list! In Windows 7, websites could be ‘pinned’ to the taskbar (which used a 32px resource in the favicon.ico file) but now they can also be pinned to to the start screen, having a special Windows 8 ‘tile’ of their own.

Pinned Site in IE8 without provided imageIf you don’t provide your own tile image, the OS will simply use a light grey version of the IE logo (see right).

However, specifying an image is straightforward, and thankfully doesn’t interfere with any other favicons you may have linked to in the <head> of your page. All you need is a 144×144px transparent PNG, and a background colour for the tile, served via meta tags:

<meta name="msapplication-TileImage" content=“pinned.png”>
<meta name="msapplication-TileColor" content="#ef0303”>

Note that the PNG doesn’t have to be transparent, but it doesn’t cover the whole tile. A square start screen tile is 150×150px, so the 144px square PNG only occupies the top centre area. The best approach is: specify an image for the centre, and background colour in HEX, RGB or CSS named values. If a colour isn’t specified, IE will take the most prominent colour from your site.

IE will take the <title> attribute for tile label, but if you want to provide a shortened tile-friendly title, you can use a meta tag, for example:

<title>Hicksdesign: Design for Print, New-Fangled Media and other wobbly bits</title>
<meta name="application-name" content=“Hicksdesign”>

The PNG doesnt cover the whole tileFinal thing to watch out for: if you fill the entire 144px area, it won’t look vertically centred on the start tile. Sites like BBC News have got around this by leaving the top 56px as whitespace (see right – where the area the PNG covers has been highlighted). The image then looks balanced on the tile!

If you want to delve further into implications of Windows 8 for websites, I can highly recommend this excellent post on the Breaking the Mobile Web Blog. You can also add badge notifications.

Recent Posts

Troika #33: Endings

18 Feb 2019

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Instagram Hickstagram

  • 18 Feb 2019

    Troika #33 is out, for pleasuring your lug-holes! Link in the bio!

  • 17 Feb 2019

  • 15 Feb 2019

    I didn’t manage to do a single episode of the Troika Podcast in 2018, but I’ve managed to record one now. Doing the whole process on my iPad Pro is wonderful! Episode 33 coming soon…

  • 14 Feb 2019

    That time of year when I keep marvelling at “Still light at 5!” On my way home…

  • 03 Feb 2019

    Black-headed Gulls huddled together on the ice at Rushy Common. #birding #digiscoping

  • 02 Feb 2019

    Found a bundle of things from my birth while at my Dads today. Leaflets on maternity benefits, welfare services and my weight card (Johnathan? Have I been spelling my one name wrong all these years?!)

  • 01 Feb 2019

  • 01 Feb 2019

  • 27 Jan 2019

    For her birthday last year, some of Leigh’s chums clubbed together bought her a gin blending weekend at the Plough in Clanfield. We booked it for January (when it would be needed most). It was like a potions class, and after a lot of smelling, she now has a gin that tastes like pencil shavings! It’s even nicer than it sounds!

  • 23 Jan 2019

    Pondering about pictograms - we’re going to need a new symbol soon. #icons #pictograms #symbols #representations

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom