In the Windows 10 Start Menu, I used Pin To Start to a medium sized tile for Firefox - and the icon is nice and large - but is not the case for other shortcuts. I was wondered why... and how to make all the icons have a more consistent look.
I want tiles that look like Firefox’s and not Edge’s:
A Google search brought me to this question, “How can I change the icon size on the Windows 10 start menu?” on Stack Exchange, with a brilliant and answer by Jonno. Jonno ended up creating a tool to custimize the tiles, TileIconifier, which is on GitHub.
In short, the Windows Start Menu reads a VisualElementsManifest file to configure the look of the tile, e.g. for
firefox.exe the start menu will look for
firefox.VisualElementsManifest.xml in the same folder.
For details on the manifest file format, refer to the Microsoft documentation on Start screen tiles. The example given is:
<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <VisualElements BackgroundColor="#FF0000" ShowNameOnSquare150x150Logo="on" ForegroundText="light" Square150x150Logo="Assets\150x150Logo.png" Square70x70Logo="Assets\70x70Logo.png"/> </Application>
Square150x150Logo is what I am most interested in changing, as this is used for the Medium tiles. I also turn off the
ShowNameOnSquare150x150Logo as the icons alone are sufficient.
I don’t think
BackgroundColor works anymore with windows 10. No more gaudy Metro UI! Unfortunately, you still need this attribute, or the manifest will fail to load.
Assuming I have an existing source icon I like, then all I need to do is:
- add a border,
- re-size to 150x150 and 70x70,
- save as PNG, and
- lastly, create the manifest file.
Of course I want this automated via script!
A note on the source icons:
- they should be either PNG or SVG with transparent backgrounds.
- the should be larger than 100 pixels.
- SVG files sometimes have
widthattributes smaller 100 pixels, so try increasing if required.
Fortunately for us, ImageMagick can do all the image manipulation required (I downloaded the Portable version for Windows).
The rest of the automation is achieved with a simple
set f=%~n1 magick convert +antialias -density 96 -background transparent -resize 100x100 -gravity center -extent 150x150 %1 "%f%"_150.png magick convert +antialias -density 96 -background transparent -resize 36x36 -gravity center -extent 70x70 %1 "%f%"_70.png ( echo ^<Application xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'^> echo ^<VisualElements BackgroundColor='#20123a' ForegroundText='light' ShowNameOnSquare150x150Logo='off' Square150x150Logo='%f%_150.png' Square70x70Logo='%f%_70.png'/^> echo ^</Application^> ) > "%f%".VisualElementsManifest.xml
First, you’ll need to know:
- the folder of the Start Menu shortcut, e.g. for Firefox, and
- the folder and filename of the executable i.e.
C:\Program Files\Mozilla Firefoxin this example
To open Explorer to the folder of the shortcut: right-click on an item in the Start Menu > More > Open file location. This is usually in
C:\ProgramData\Microsoft\Windows\Start Menu\Programs or
To open Explorer to the folder of the executable, from the shortcuts folder above, right-click the shortcut > Open file location, or look at Properties > Target folder.
Then run the script:
- put the source icon in the same folder, e.g. get the Firefox logo from WikiMedia Commons and save it as
firefox.svgto match the filename of the executable
- run the batch file with the source icon as the first parameter, i.e.
- three files will be generated based on the input file name -
- move or copy all three files to the location of the executable (overwrite or rename existing files as needed) e.g. in
C:\Program Files\Mozilla Firefox.
Lastly, we want to refresh the Start Menu:
- open Explorer to the Start Menu shortcut folder (
- move (drag and drop) the shortcut out of the folder to another location like your Desktop, and then move it back.
- have a look at the Start Menu, the tile should be refreshed with the new icon!
Alternatively, refresh the shortcut file per Step 7 in the Microsoft documentation by running
(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date in PowerShell.
And that’ it. Hope it works for you.
Aside: if you want to use ImageMagick from a Docker container on Linux or macOS:
FROM apline RUN apk add --no-cache imagemagick ENTRYPOINT ["magick"]
docker build -t magick .
And run via
magick.sh using STDIN and STDOUT so as not to mount folders or make changes to the container (
#!/bin/bash docker run -i --rm magick convert +antialias \ -background transparent -resize 100x100 \ -gravity center -extent 150x150 - png:- < "$1" > "$1".png