Custom icons in Windows Start Menu Medium Tiles

Posted

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.

The Problem

I want tiles that look like Firefox’s and not Edge’s:

Windows 10 Start Menu Tiles with different Icons

Background

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>

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

The Want

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 height and width attributes smaller 100 pixels, so try increasing if required.

The Solution

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 make_manifest.cmd script:

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. firefox.exe is C:\Program Files\Mozilla Firefox in 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 C:\Users\[user]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs.

Windows 10 Start Menu Open File Location

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.

FireFox Properties File Location

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.svg to match the filename of the executable firefox.exe.
  • run the batch file with the source icon as the first parameter, i.e. make_manifest.cmd firefox.svg.
  • three files will be generated based on the input file name - firefox_150.png, firefox_70.png and firefox.VisualElementsManifest.xml.
  • 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 (.lnk files).
  • 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:

Dockerfile:

FROM apline
RUN apk add --no-cache imagemagick
ENTRYPOINT ["magick"]

Build with 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 (--rm):

#!/bin/bash
docker run -i --rm magick convert +antialias \
 -background transparent -resize 100x100 \
 -gravity center -extent 150x150 - png:- < "$1" > "$1".png