What is browserconfig.xml for?

browserconfig.xml is a small settings file for Windows tiles. When someone pins your website to the Start menu in Windows, it tells Windows which picture to show on the tile and what colour to put behind it. ICON by Zaweba writes browserconfig.xml as part of its website favicon set, along with the mstile-150x150 image it points to, so you get it without writing any XML yourself.

Of all the files in a modern favicon set, this is the one that puzzles people most, because it has nothing to do with tabs or phones and its name says very little.

Where it comes from

Windows has long let people pin websites as tiles. A tile is a square, often bigger than a favicon, with a coloured background behind an image. Rather than squeeze that information into extra tags on every page, the browser looks for a separate file, browserconfig.xml, at the site's root. Inside are a reference to the tile image and the tile colour.

It sits alongside the other platform files. Apple devices use the apple-touch-icon, Android and modern browsers use site.webmanifest, and Windows tiles use browserconfig.xml. Covering all of them is what makes a favicon set complete.

What ICON by Zaweba writes

Load a picture into ICON, ideally a square PNG of 512 pixels or more, and open the website favicon set. ICON writes the standard set into a folder of your choice: favicon.ico with 16, 32 and 48 pixels inside, PNG favicons at 16, 32, 48 and 96, apple-touch-icon at 180, android-chrome icons at 192 and 512, mstile-150x150, site.webmanifest, browserconfig.xml and head-tags.html.

Before generating, you set the site name, the theme colour and the background colour as hex values, such as #7C3AED. The theme colour starts out as the average colour of your picture, which is often a sensible choice, and you can change it. Those colours go into the manifest and into browserconfig.xml, so the tile and the phone surroundings match the rest of your brand.

Each output can be ticked on or off. If you are certain you will never care about Windows tiles, you can leave browserconfig.xml and the mstile image out. They are small, though, and harmless to include.

Putting it on your site

Upload the files ICON made to the root of your website, the same folder as your home page. Then paste the head tags into each page. ICON shows them on screen with a Copy button, and also saves them as head-tags.html, so you can paste from either. The tags point browsers at the right files, and with browserconfig.xml in the root, Windows can find it for tiles.

If your site is built from a template, the head tags go into the shared header once and every page gets them.

Do you really need it?

Plenty of sites manage without browserconfig.xml, and nothing breaks if it is missing. Without it, a pinned tile simply falls back on whatever Windows can find, which may be a small favicon on a plain background. Including it costs nothing and gives anyone who does pin your site a proper tile. Since ICON makes it in the same pass as everything else, there is little reason to leave it out.

Common mistakes

The usual slip is uploading the files somewhere other than the site's root, so the paths in the tags and in browserconfig.xml point at nothing. Another is changing the brand colour later and forgetting the tile colour. If you change your colours, generate the set again in ICON with the new hex values and upload the fresh files together.

ICON by Zaweba does all this on your PC, with no upload and no account, so your logo stays with you until you put it on your own server.