AndroidのChromeにてネットサーフィンをしていると、いくつかのサイトではタブの色まで変更になっているサイトがいくつか見られました。
サイト例
例えばYoutubeでは赤色、facebookでは青色とサイトに応じたタブの色が反映しているサイトがありました。
自動的に表示されているわけでもないので、どうやって表示しているのか調べてみることにしました。
metaタグを付与するだけ
調べてみた結果、「theme-color」のmetaタグを追加し、contentに色コードを指定すればタブに色設定ができることがわかりました。
<meta name="theme-color" content="#ffcd85"/>試してみる
本ブログにもうまく設定することができました。
設定できる端末
このmetaタグはAndroid5（Lolipop）以降のChromeのみ対応しているようです。
PC・iPhoneでは対応していないのでご注意ください。※iPhoneではWebアプリチックに表示できるmetaタグがありますので、頑張りたいのであればそちらを使うかたちになるのかなと思います。
iPhoneはiOS15から「theme-color」のmetaタグ対応しました。
