So your picture can be on everyone’s desktop all the time
Overview
Pin your website
Windows 10 users can pin a website URL as a Favorite on their home screen such that when the tile is clicked, the site’s XML feed is shown (formatted).
Instructions here describe how to provide Windows tiles with images for the different size tiles Windows uses.
-
See some examples of sites pinned on Windows 8 & 10 at http://pinnedsitedemo.cloudapp.net/testdrive/index.aspx.
-
Specify a title for your site.
-
Specify a color. The default is black (000000), but select white (FFFFFF) if your picture has a dark background.
-
Upload an image.
-
Crop the images online.
Crop size Image size Name 128 x 128 128 x 128 tiny 270 x 270 198 x 198 square 270 x 558 248 x 120 wide 558 x 558 248 x 248 large -
In “Add Notifications”, specify the RSS feed URL. The RSS feed for this site is:
http://wilsonmar.github.io/feed.xml
(The XML is not that human-readable, but the lastest post is listed first.)
-
Download the zip file package which contains png files.
-
View each file to make sure they look OK.
-
PROTIP: Rename image file names with a “windows-“ prefix so they appear together, and enable you to remember what they’re for.
-
Move the files in your /images folder.
-
Edit the downloaded browserconfig.xml file to rename its image file name references before copying it to the root of your site.
-
Paste just one line in your site’s landing page (index.md) <head> section.
With a Jekyll site, edit the _head.html file within the _includes folder to add this among Webmaster Tools verification meta lines:
<!-- For Microsoft Windows 8 & 10 pinned site with browserconfig.xml and 4 windows-tile- png files -->
<meta name="application-name" content="Wilson Mar"/>
Doing this would allow you to ignore what Microsoft’s website also generates, such as:
<meta name="application-name" content="Wilson Mar"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="/images/windows-tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/images/windows-tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="/images/windows-tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="/images/windows-tile-large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&id=5; cycle=1"/>
Pin the site as Live Tile
-
In the Omni-search bar type in the URL. For this site: wilsonmar.github.io
http:// is not needed.
-
Click the three dots at the upper-right corner to open the menu.
-
Select Pin to Start.
-
Click the Windows button for the Start screen.
-
Right-click on your website’s picture to Resize.
-
Select Large (or another size).
Social media coloring
There’s also:
<meta name="msapplication-TileColor" content="#000000"/>## API
More about setup Live Tile Notifications:
https://msdn.microsoft.com/library/bg183312%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
See the session What’s New for Tiles and Toast Notifications at Build 2016 on April 1, 2016 by Lei Xu, who also did spoke at Build 2015 session Tiles, Notifications, and Action Center.
Make Windows More Touch Friendly (Tablet Mode)
If you’re one of the few who want to bring back the Windows 8 UI onto Windows 10:
- Right-click on the Desktop to select Personalize.
- Click on Start on the left Personalization menu.
- Turn on “Use Start full screen”
- Click on Start button on your keyboard.