How to set a theme colour for your website icons

In ICON by Zaweba, type your theme colour and background colour as hex values, such as #7C3AED, before you generate the website favicon set. ICON writes them into site.webmanifest and browserconfig.xml, and the head tags it gives you to paste carry the theme colour too. If you leave the theme colour alone, it starts as the average colour of your picture.

Colours are easy to overlook when making favicons, because the icon images look the same either way. They matter on phones and on Windows, where the surroundings of your icon take on the colours you choose.

What the two colours do

The theme colour is your site's main brand colour. Browsers and devices that honour it can use it to tint parts of their interface around your site. The background colour is the colour shown behind your icon in places such as a phone's launch screen for a saved web app, and it is the backdrop for the Windows tile.

Both live in small text files rather than in the images. site.webmanifest holds the name, the 192 and 512 pixel icons and the colours, for Android and modern browsers. browserconfig.xml holds the tile picture and colour for Windows. ICON writes both for you.

Setting the colours, step by step

Load your logo into ICON. A square PNG, 512 pixels or larger, gives the best results across every size. If it is not square, choose Contain to pad it with transparency or Cover to crop the centre.

Go to the website favicon set. Enter the site name, then the theme colour and the background colour as hex codes, a hash followed by six characters. ICON fills in the theme colour from the average of your picture to start you off, which often lands close to the logo's main colour. If your brand has an exact colour, type that instead.

Choose the folder and generate. ICON writes favicon.ico, the PNG favicons, the Apple touch icon, the Android icons, the Windows tile image, site.webmanifest, browserconfig.xml and head-tags.html. The head tags appear on screen with a Copy button. Paste them into your page's head and upload the files to your site's root.

Choosing good colours

Take the hex value from your brand guide if you have one, or from the logo itself. An average colour is a fair guess, but on a logo with two strong colours the average can come out as a muddy mix of both, so check it before you accept it.

For the background colour, think about contrast with the icon. A white logo on a white background disappears; a dark logo on a dark navy does the same. A background that matches the logo's own background, or a light neutral behind a dark mark, usually looks right. If the logo has a transparent background, the colour behind it is what people actually see, so this choice matters even more.

Keep the two colours consistent with the website itself. Someone tapping your saved icon and seeing a bright orange splash before a calm blue site will notice the mismatch.

Changing colours later

Since the colours live in the manifest and browserconfig files, changing them means writing those files again. In ICON, load the same picture, enter the new values and generate the set once more, then upload the fresh files over the old ones. Devices and browsers can keep the old details for a while, so do not worry if the change does not appear everywhere at once.

One pass, matching files

The colours are one part of a single pass. The same picture makes the .ico, every PNG size and the touch icons, and the same settings go into the text files, so everything matches. It all happens on your PC with ICON by Zaweba: nothing is uploaded and no account is needed.