Toolbar colour customisation in Chrome with theme-color

Theme colouring

With the release of Android Lollipop, the way that Chrome manages tabs was changed. Instead of being all contained within the one application, when the task switcher is activated, each tab shows separately, almost like a new app. With many tabs open, the task switcher can become a sea of indistinguishable grey, broken up the bright toolbar colour usage by native apps like Gmail or Twitter. So how do you ensure your website stands out here? Fortunately with the release of Chrome 39, there is a way – you can now customise the toolbar colour with just one line of HTML, the theme-color meta tag!

Toolbar colour setting – theme-color

One line of HTML is all it takes to enable this feature. On Square1.io we use a fairly dark theme, so we’ll need the hex code for black (#000). In the <head> section of the page, we add the following tag:

<meta name="theme-color" content="#000">

Reload the page in Chrome, activate the app switcher, and now you should be seeing the theme colour applied to the toolbar. A nice touch is that Chrome is smart enough to figure out that bright text is needed when a dark background toolbar colour is used, and automatically renders this as white for us.

Anything else we can do?

Chrome will also attempt to load a high-res icon to be shown on the toolbar when in app switcher mode. Ideally it’ll take a 192×192 image (old-school 16px favicons will be ignored). We can specify this with the below tag, again in our <head> section.

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

And that’s all there is to it! A very simple and lightweight way of helping your site stand out from the crowd that little bit more. This was demoed initially by the excellent HTML5Rocks site, and has already been implemented by Ars Technica, Medium and, a little closer to home, Joe.ie and SportsJoe.ie, with more sure to follow soon!

Dutch PHP Conference 2025 Speaker

Dutch PHP Conference 2025

In March 2025, I'll be giving a talk at the Dutch PHP Conference in Amsterdam. I'll be talking about idempotency – what it is, why it’s so useful, and how big players like Stripe and AWS leverage it in production. Expect real-world examples, practical takeaways, and a deep dive into making your systems more robust and reliable.

Get your ticket now and I'll see you there!

Share This Article

Related Articles


Lazy loading background images to improve load time performance

Lazy loading of images helps to radically speed up initial page load. Rich site designs often call for background images, which can't be lazily loaded in the same way. How can we keep our designs, while optimising for a fast initial load?

Using Google Sheets as a RESTful JSON API

Save time by not building backends for simple CRUD apps. Use Google Sheets as both a free backend and JSON API endpoint!

Serverless caching and proxying with Cloudflare Workers

Using Cloudflare Workers we can quickly build an effective API proxy, without spinning up any additional hardware. Whether its needing a CORS proxy, speeding up slow APIs via caching, or rate limit management on stingy APIs, this serverless tech is as easy to set up as it is powerful.

Idempotency - what is it, and how can it help our Laravel APIs?

Idempotency is a critical concept to be aware of when building robust APIs, and is baked into the SDKs of companies like Stripe, Paypal, Shopify, and Amazon. But what exactly is idempotency? And how can we easily add support for it to our Laravel APIs?

Calculating rolling averages with Laravel Collections

Rolling averages are perfect for smoothing out time-series data, helping you to gain insight from noisy graphs and tables. This new package adds first-class support to Laravel Collections for rolling average calculation.

More