1. The ICO file.This factoid is based on the Main Icon Group in Delphi, bds.exe, which you can examine with XNResourceEditor or Resource Hacker.
Build an ICO file containing your program icon in all these sizes and color depths. Use that icon when you Project > Build by associating it with the project. In Delphi: menu Project > Options, Application. Do this for at least the target platform combined with Release, e.g. Win32 Release and/or Win64 Release. Load your icon. Repeat for other targets as necessary. Project > Build each one.
2. The visualelementsmanifest.xml fileMake a file named ____.visualelementsmanifest.xml file where the ____ is replaced with the name of your EXE. So for MyGreatApp.exe it would be MyGreatApp.VisualElementsManifest.xml and this XML file MUST be located in the same folder as your EXE. The filename itself is case insensitive.
The contents of the manifest XML file will be similar to this:
DisplayName = "My Great App"
Description="Some text here"
IMPORTANT: when you look for documentation about this, be careful to note that MOST documented features apply only to MetroUI applications. Wide logos, for example, are only available for MetroUI apps. [ In fact, I am not sure yet whether the square310x310 logo is used or ignored by Windows 10. ] MSDN links are at the end of this post.
The choice of WinAssets as the name of the subdirectory is arbitrary.
EXTREMELY NOT OBVIOUS: the filenames referenced are adjusted automatically by Windows according to some rules that make sense and are documented, but are simply not obvious until you know what you are looking for. Windows 8.1 and 10 will automatically use the scaled version of your file if you follow Microsoft's XAML naming convention. In other words, if you create your files with names exactly as indicated in the next step, it will all work out.
3. A set of PNG filesYou can use a single PNG file, or a large set. If you use a single 256x256px PNG file for all the required files, you will end up with a super large icon in the start menu, like Google Chrome. Whether this is good-dramatic, or bad-ostentatious, is up to you to decide.
If you want to go for the full set to allow for scaling on all sorts of monitors, there is a Photoshop template that makes all the files for you.
NOTE: as input to this process, you would want the master copy of the logo in one of these formats, in order of priority:
else .cdr (Corel Draw)
else .psd (photoshop min 300 dpi)
else .png 2480x2480
Ok -- go get The Photoshop template file and instructions for its use here.
The output of that process will be a large collection of PNG files. There will be too many; we only need the LockScreenLogo* files and the Square* files. The rest are relevant for MetroUI apps.
Note: if you want to prefix all the file names with your product name, go for it and just be sure to include the same prefix within the references in your VisualElementsManifest.xml file.
4. File placementAll those PNG files have to be placed in the WinAssets folder below your EXE, or wherever you specified in your VisualElementsManifest.xml file.
Here is a directory listing so you can see exactly:
Directory of (snip)
08/12/2016 01:23 AM xxx _____.exe
08/12/2016 01:13 AM 776 _____.VisualElementsManifest.xml
Directory of (snip)\WinAssets
08/12/2016 12:31 AM <DIR> .
08/12/2016 12:31 AM <DIR> ..
08/11/2016 02:29 PM 1,709 LockScreenLogo.scale-100.png
08/11/2016 02:29 PM 2,219 LockScreenLogo.scale-125.png
08/11/2016 02:29 PM 2,923 LockScreenLogo.scale-150.png
08/11/2016 02:29 PM 4,265 LockScreenLogo.scale-200.png
08/11/2016 02:29 PM 11,137 LockScreenLogo.scale-400.png
08/11/2016 02:36 PM 3,449 Square150x150Logo.scale-100.png
08/11/2016 02:36 PM 4,721 Square150x150Logo.scale-125.png
08/11/2016 02:36 PM 5,930 Square150x150Logo.scale-150.png
08/11/2016 02:36 PM 8,890 Square150x150Logo.scale-200.png
08/11/2016 02:36 PM 26,019 Square150x150Logo.scale-400.png
08/11/2016 02:36 PM 9,327 Square310x310Logo.scale-100.png
08/11/2016 02:36 PM 12,888 Square310x310Logo.scale-125.png
08/11/2016 02:36 PM 17,262 Square310x310Logo.scale-150.png
08/11/2016 02:36 PM 27,721 Square310x310Logo.scale-200.png
08/11/2016 02:36 PM 79,945 Square310x310Logo.scale-400.png
08/11/2016 02:36 PM 3,157 Square71x71Logo.scale-100.png
08/11/2016 02:36 PM 4,206 Square71x71Logo.scale-125.png
08/11/2016 02:36 PM 5,244 Square71x71Logo.scale-150.png
08/11/2016 02:36 PM 7,481 Square71x71Logo.scale-200.png
08/11/2016 02:36 PM 21,862 Square71x71Logo.scale-400.png
20 File(s) 260,355 bytes
Testing1. Install your software, and then "pin to Start Menu" to see the visual elements.
2. In file explorer, look at a directory containing your EXE. Use the View choices to toggle between "Extra large icons", "Large icons", "Medium icons" and "Small icons". That picks up on the ICO that was compiled to a resource and linked into your EXE.
3. If you have spare time, experiment with changing the DPI scaling of your monitor display.
There is a trick for updating the timestamp of the program shortcut (LNK file) to avoid trouble with Windows caching the display of the visual elements. If you can run the PowerShell IDE, use this PowerShell syntax:
(ls "C:\Users\(snip)\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\(snip)___your program__.lnk").lastwritetime = get-date
Tip: To find your LNK file, locate your program in the Windows Start Menu, right click, Open Location. Shortcuts are always LNK files.
Graphics AssistanceIf for some reason you do not have PhotoShop or any other easy way to make all the PNG files with the exact required names, you can talk to the people at Lucid Impact in North Carolina for some efficient help. This is a fairly quick and painless exercise when you have the software. You will however need a high-res original of your program logo artwork, as indicated above.
This excellent post ( Custom Tiles for Desktop Apps ) should answer any remaining questions you have. If you like the dramatic big Chrome tile, use the advice there to simplify all this down to a single 256x256 png file.
The necessary MSDN links follow.
The necessary MSDN links follow.
- MSDN VisualElementsManifest documentation
- MSDN XAML
- Guidelines for tile and icon assets Just remember that we can only use a subset of the features listed.