How to set a theme for mobile Chrome

2016-02-21 | #solution, #webdev

You may have noticed those nice header colors and nifty, sharp site icon on mobile Chrome. Setting those is really easy and straightforward:

Just add something like

<meta name="theme-color" content="#222222"/>

to the head-element to set a color for the browser bar

and add something like

<link rel="icon" sizes="192x192" href="/img/highres-icon.png"/>

to define a high res icon.

You can just add the icon besides your regular favicon. According to Google the high res icon should ideally a 192x192 PNG.