Windows 8 prepare site for pinning
Asked Answered
L

2

9

I would like to prepare my site for windows 8 pinning and have been reading some documentation on how to add the various images and could figure out that it could be done by using metadata and according to instructions and help on this site I could actually build the following meta tags but i couldn't figure out where I can call the browserdetect.xml file assuming I have the file located at mysitee.com/upload/win8/browserdetetct.xml and the images in the same folder

<meta name="application-name" content="MySite"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-square70x70logo" content="http://placehold.it/70x70/000000/ffffff&text=MySite"/>
<meta name="msapplication-square150x150logo" content="http://placehold.it/150x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-wide310x150logo" content="http://placehold.it/310x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-square310x310logo" content="http://placehold.it/310x310/000000/ffffff&text=MySite"/>

Any help please ?

Linalinacre answered 4/7, 2013 at 15:59 Comment(0)
H
28

Update: Microsoft Edge on Windows 10 and Windows 10 Mobile now only uses /browserconfig.xml, so stop including meta tags.

I see that Microsoft has — a bit prematurley — updated their wizard to Windows 8.1. Which is not backwards compatible with Windows 8.

What you need (in addition to my comments in the other post) is the older code with a 144x144 px image:

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

That will work in Internet Explorer 10 on Windows 8 in conjunction with the two backwards compatible tags you already have:

<meta name="application-name" content="MySite" />
<meta name="msapplication-TileColor" content="#2d90c6" />

Note that you should not use application-name unless your site is actually a web application. (Per the HTML5 specs.)

You can test the Windows 8.1 (Internet Explore 11, actually) stuff in a virtual machine. Microsoft is handing them out for free over at http://www.modern.ie/en-US/virtualization-tools#downloads

Further enhancements: Internet Explore 11 does not actually need the tags to be present in the document. so you can save users who do not intend to pin your site the bandwidth (thus gaining performance) by including a browserconfig.xml in your root (eg. example.com/browserconfig.xml). IE 11 will read this file when a user tries to pin a site and load the resources needed from there instead of from the meta tags. So what you do is include the two/three tags IE 10 needs, and put the new IE 11 tags in your browser config file. Read up on http://msdn.microsoft.com/en-us/library/ie/hh772707%28v=vs.85%29.aspx (ignore the bits where it tells you to include a meta tag to load the config file. As long as the file name is browserconfig.xml and it is on your root, it will automagically work.)

Making it all darn perfect: Windows 8 requires no padding in their image, only a transparent background. Windows 8.1, however, expect ⅕ of the tile images to be left transparent for padding. You will stick out like a sore thumb amongst the other applications if you do not pay attention to the padding.

Live example: I implemented this on my own site over at Slight Future if you want an working (as of the Windows 8.1 Preview 1) example.

Final thoughts: Why Microsoft have to introduce something new for every single version of Internet Explorer / Windows, I can’t understand. Nothing is backwards compatible. For IE 9 / 10 and pinned sites on the Windows 7 / 8 desktop taskbar, you need a favicon in four different sizes.

Hilly answered 18/8, 2013 at 21:51 Comment(5)
Disclaimer: The IE 11 bits are based on preliminary implementation and documentation who is subject to change. Come October 17th and the final version of Windows 8.1, this may no longer be correct.Hilly
Thank you very much for the clear and detailed answer. I also thank you very much for dedication such time to dig into the problem. I owe you a beer :-)Linalinacre
@Aeyoun Great answer! I'm curious to know more about this part: "Windows 8.1, however, expect ⅕ of the tile images to be left transparent for padding.". Can you elaborate more on that? Do you have a link stating this expectation?Ultimatum
@Ultimatum I have no sources other than my own original testing. (There is very little documentation available on this.)Hilly
This seems to be deprecated in the latest version of Edge webmasters.stackexchange.com/q/131077Faiyum
H
4

You can follow the step-by-step tutorial / wizard at http://www.buildmypinnedsite.com

Hilly answered 18/8, 2013 at 4:58 Comment(2)
Thank you so much. I followed exactly the instructions on this website without any success.Linalinacre
@Linalinacre by damn, you’re right. Submitting new and fully tested answer instead. I spent my weekend digging into this stuff, so you were lucky with your timing. ;)Hilly

© 2022 - 2024 — McMap. All rights reserved.