AndroidのChromeにてネットサーフィンをしていると、いくつかのサイトではタブの色まで変更になっているサイトがいくつか見られました。
サイト例
例えばYoutubeだと赤色になってたり
facebookだと青色になってたり
他にもサイトによっては特徴に応じた色が反映しているものがありました。
自動的に表示されているわけでもないので、どうやって表示しているのか調べてみることに。
設定はmetaタグを付与するだけ
調べてみた結果、「theme-color」のmetaタグを追加すればそれに応じた色設定ができるようです。
contentは設定したい色を設定します。
<meta name="theme-color" content="#ffcd85">
意外と簡単！
試してみる
できてますね！
使える端末
このmetaタグはAndroid5（Lolipop）のChrome・Operaのみ対応しているようです。
まぁ、現時点でAndroidのバージョンは9台までいってますし、ほとんどの端末では対象になっているのではと思います。
しかし、残念なことにPC版・iPhone版では対応していないです。
iPhoneではWebアプリチックに表示できるmetaタグがありますので、頑張りたいのであればそちらを使うかたちになるのかなと。
最後に
スマホしかもAndroidしか使い道がない小ネタですが、やってもやらなくてもSEOとかも支障なさそうですし、お好みでどうぞ。