theme-color Meta Tag

Chrome on Android Lollipop supports a new type of Meta tag, with name theme-color, which can be used by webmasters to set the toolbar color. For example, if a webpage has theme-color meta tag with content value ‘black’, Chrome’s toolbar will turn black for the tab showing that webpage.

This would also appear in Android’s Recent Apps view, as shown in the following screenshot:

theme-color meta tag chrome lollipop

If you run any website or blog, you need to add just one line of code to implement this feature to your site. Insert the following code in the header section of your web page:

<meta name="theme-color" content="#33363b">

For self-hosted WordPress sites, you need to add this in the header.php file of your theme. The content value must be a valid HTML color code. Set the content value according to your own choice, matching this value to the colors used on your websites would be better.

As Chrome on Lollipop shows tabs and apps together in the recent apps view, adding theme-color meta tag would definitely give your website a distinct identity.

2 thoughts on “theme-color Meta Tag”

Leave a Comment