AndroidのChromeでページを開いた時にブラウザのタブの色を変更させる方法

AndroidのChromeでサイトを開いた時に、タブの色を変更させる方法をご紹介いたします。

以下デモページにAndroidのChromeからアクセスすると、タブの色が青色に変わります。

HTML内にメタタグを1行追加するだけで、このようにタブの色を変更することができます。

HTMLの<head>～</head>内に、以下のメタタグを追加します。

<meta name="theme-color" content="#3ab0db">

上記を記述すると、以下のようにタブの色が変わります。「content=”#3ab0db”」のカラーコードを変更すれば、好きな色にすることができます。

あとがき

AndroidのChromeでアクセスした場合のみという、限定された環境にしか対応していませんが、サイトの雰囲気に合わせてブラウザのタブ色も変更したいという時は、theme-colorメタタグを記述しておくと一部のユーザーはカバーできますね。