Blend your website with a theme color for Android L devices

Joash Pereira
Joash’s Blog
Published in
1 min readJan 18, 2015
Website screenshot with theme color

Websites on Chrome for Android on the latest version Lollipop show the website’s theme color on the status and nav bars of Chrome browser. Starting in Chrome v39 for Android, you can set a theme color for your website, using the meta tags.

The syntax is straight forward:

Add a meta tag to your page’s <head> with the name=”theme-color”, and set the content to any valid CSS color.

For example:

[code lang=”html”]
<head>
<meta name=”theme-color” content=”#3498db”>
</head>
[/code]

App Switcher

Also in addition to them color, Chrome will also show high-res favicons when they’re provided. Chrome for Android picks the highest res icon that you provide and the recommend resolution is 192×192px PNG file.

For example:

[code lang=”html”]
<head>
<link rel=”icon” sizes=”192x192" href=”favicon-jp.png”>
</head>
[/code]

Check out more on Google’s Web fundamentals

--

--