Custom Tiles for Desktop apps: How to create.
Seen it in theory, but it needed a proof. And since I didn't see it in the Customization section yet: here goes.
We've all seen it:
One of our desktop programs gets added to the Start Screen. Then we notice that all desktop apps use a small icon in the middle of the medium tile. Looking like 32x32 with big padding/borders:
(this uses classic ICO files on shortcuts)
How do we change the icon or increase its overall size in the square?
(Check the NOTES below for important info.)
Can be applied in practice:
(this uses PNG files like 'app' shortcuts)
How to get it done:
As the article in the above link describes, in our program's (exe) folder, we need a XML file with the same name as the executable followed by the ".VisualElementsManifest.xml" extension.
Like so:For example, for the executable file "contoso.exe", the accompanying XML file is named "contoso.visualelementsmanifest.xml".
Don't forget the PNG files for the tile (150x150 and 70x70 pixels). In the example all images get loaded from the 'Assets' folder.
The color of the text can be black or white: aka "dark" and "light". The background color is noted in its HTML value.
So that can be changed according to your needs*:
*You may need to delete and re-pin a tile to be able to see the changes made in the XML manifest file.
Sample XML code for a program called 'test.exe' is called "test.VisualElementsManifest.xml" and looks like this:
Extra info:Code:<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <VisualElements BackgroundColor="#FFFF00" ShowNameOnSquare150x150Logo="on" ForegroundText="dark" Square150x150Logo="Assets\test.150.png" Square70x70Logo="Assets\test.70.png"/> </Application>
For the above sample we also need the referring PNG files: 150x150px and 70x70px for medium and small sizes.
In the examples above, all the images/PNGs are placed in the 'Assets' folder but this is just a matter of taste and organised spirit.
The program used in most of the examples above is Redshift.
Very nice little program, I use it a lot, but is a good example in this case because the exe has no icon of its own and we can easily prove the tile PNG icon is working.
Desktop app tiles can only be Small (70x70) and Medium (150x150) in size.
The Wide and Large sizes are reserved to live tiles of Metro UI apps.
So Desktop app tiles cannot be live tiles either.
These Desktop app icons will also not turn in Black and White while using High Contrast.
Store apps use a different XML file with additional PNGs for HC modes: Black and White.
The XML Background and text colors are replaced by the HC theme colors.
Using a PNG with alpha/transparency means that our specified HTML background color or HC theme BG+text will be seen through the transparent portions.
Also note that this workaround doesn't use, the great tool, OblyTile to create tiles but instead requires manually generating the XML and specifying some PNG images.
Keep it simple
The PNG and the XML files can be placed in the same folder as the exe.
One PNG file of 256x256 (tested) is more than enough: use it for both 150x150 and 70x70 entries.
If you pin or un-pin and re-pin, the new tile will be used.
Code:<Application xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'> <VisualElements ShowNameOnSquare150x150Logo='on' Square150x150Logo='test.png' Square70x70Logo='test.png' ForegroundText='light' BackgroundColor='#5AADC8'/> </Application>