- Messages
- 2,979
- Location
- Orbiting the Moon
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.)
The theory:
https://msdn.microsoft.com/en-us/library/windows/apps/dn393983.aspx
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:
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:
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.
Information
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.
Information
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.
That's all.
Cheers!
Hopachi
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.)
The theory:
https://msdn.microsoft.com/en-us/library/windows/apps/dn393983.aspx
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:
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:
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>Extra info:
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.
InformationDesktop 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.
InformationKeep 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>That's all.
Cheers!
Hopachi
Last edited:
My Computer
System One
-
- OS
- Windows 10 x64
- Computer type
- Laptop
- System Manufacturer/Model
- HP Envy DV6 7250
- CPU
- Intel i7-3630QM
- Motherboard
- HP, Intel HM77 Express Chipset
- Memory
- 16GB
- Graphics Card(s)
- Intel HD4000 + Nvidia Geforce 630M
- Sound Card
- IDT HD Audio
- Monitor(s) Displays
- 15.6' built-in + Samsung S22D300 + 17.3' LG Phillips
- Screen Resolution
- multiple resolutions
- Hard Drives
- Samsung SSD 250GB + Hitachi HDD 750GB
- PSU
- 120W adapter
- Case
- small
- Cooling
- laptop cooling pad
- Keyboard
- Backlit built-in + big one in USB
- Mouse
- SteelSeries Sensei
- Internet Speed
- slow and steady
- Browser
- Chromium, Pale Moon, Firefox Developer Edition
- Antivirus
- Windows Defender
- Other Info
- That's basically it.