Customize Windows 10 start menu tile for PWA

Question

I have a PWA that can be installed just fine on Windows 10 both from Edge and Chrome. But, the icon it picks is small and the background color of the start menu tile is the default blue rather than the dark brown I want.

My manifest.json is this:

{
    "name": "Shared Game Timer",
    "short_name": "Shared G Timer",
    "description": "A board game timer that synchronizes across multiple devices.",
    "icons": [
        { "src": "icons/maskable-48.png", "sizes": "48x48", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-72.png", "sizes": "72x72", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-96.png", "sizes": "96x96", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-128.png", "sizes": "128x128", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-384.png", "sizes": "384x384", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/maskable-1024.png", "sizes": "1024x1024", "type": "image/png", "purpose": "maskable" },
        { "src": "icons/transparent-square-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
    ],
    "start_url": "/",
    "display": "standalone",
    "background_color": "#271c19",
    "theme_color": "#271c19",
    "lang": "en"
}

I've also added the following to the HEAD

<meta name="msapplication-TileColor" content="#271c19" />
<meta name="application-name" content="Shared Game Timer" />
<meta name="msapplication-square70x70logo" content="icons/windows-tile-70-70.png" />
<meta name="msapplication-square150x150logo" content="icons/windows-tile-150-150.png" />
<meta name="msapplication-wide310x150logo" content="icons/windows-tile-310-150.png" />
<meta name="msapplication-square310x310logo" content="icons/windows-tile-310-310.png" />

I've searched and googled until my fingers bleed and I cannot find any official looking specification for what to put in the header/manifest to make customize the windows tile of an installed PWA. If anyone has gotten this to work, please share!

Answer 1

I came up against the same issue, and the short story is that PWABuilder does not allow you to completely specify which images to use for Windows smart tiles, and PWAs installed by browsers kind of guess on the smart tile images.

Also, it seems that the

<meta name="msapplication-square70x70logo" 

and similar HTML meta tags no longer work in Edge Chromium (they were supported in the previous Edge). Which is unfortunate, they provided clear direction for tile images.

PWABuilder has provided this document:

Image Recommendations for Windows PWA Packages

which is the best I can find. And note that the smart tile logic used by PWABuilder is not the same as the smart tile logic used by browser-installed PWAs installed on Windows (though they seem similar).

I think there's a fundamental problem in using image sizes to determine which image to use for what, so I opened this issue to describe the problem and suggest a solution:

Image size is necessary but not sufficient for choosing images

Please vote up the issue if you would like to see a better mechanism for specifying tile art (and other things like PWA Splash screens). Without votes I don't think the PWABuilder team will work on it.

If you download the PWABuilder output, you can see the .appx packages containing all the images that are used for smart tiles, splash screens, windows store logos, and so on.

Until PWABuilder provides better support for explicitly specifying images, your best option is to take the PWABuilder outputs (eg package for Windows, source package for Android, and source package for iOS), unpack them, and hand-modify each package to point to the right image assets for each use (eg tile images, splash screen images). Or you could come up with a way to generate the assets and keep each package correct. Then re-package or build the package for each platform.