Android 開発

【Androidのみ】Chromeのタブ色を変える方法

2018年11月7日

AndroidのChromeにてネットサーフィンをしていると、いくつかのサイトではタブの色まで変更になっているサイトがいくつか見られました。

サイト例

例えばYoutubeでは赤色、facebookでは青色とサイトに応じたタブの色が反映しているサイトがありました。

自動的に表示されているわけでもないので、どうやって表示しているのか調べてみることにしました。

metaタグを付与するだけ

調べてみた結果、「theme-color」のmetaタグを追加し、contentに色コードを指定すればタブに色設定ができることがわかりました。

<meta name="theme-color" content="#ffcd85"/>

試してみる

本ブログにもうまく設定することができました。

設定できる端末

このmetaタグはAndroid5(Lolipop)以降のChromeのみ対応しているようです。
PC・iPhoneでは対応していないのでご注意ください。
※iPhoneではWebアプリチックに表示できるmetaタグがありますので、頑張りたいのであればそちらを使うかたちになるのかなと思います。

参考

アイコンとブラウザの色(Google Developers)

-Android, 開発
-, ,