What's new

Solved Custom Tiles (for Desktop Apps)

Hopachi

Polyhedric Stellation
VIP Member
Pro User
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:
default-tiles.png
(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:
custom-tiles.png
(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.

For example, for the executable file "contoso.exe", the accompanying XML file is named "contoso.visualelementsmanifest.xml".

Like so:
custom-tiles1.png

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*:
custom-tiles2.png
*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.

information   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.

hc-no-details.png

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   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.

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
    Name
    Horace Lucas
    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
    Occupation
    Improving Skills
    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.
    State/Region Flag
    european union

Hopachi

Polyhedric Stellation
VIP Member
Pro User
You're welcome! :)
 

My Computer

System One

  • OS
    Windows 10 x64
    Name
    Horace Lucas
    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
    Occupation
    Improving Skills
    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.
    State/Region Flag
    european union

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top