AndroidのURLバーの色変更はtheme-colorタグを使おう

July 31, 2017Code

AndroidのChromeでいろんなウェブサイトを回遊していると、時々URLバー部分の装飾(色変更) がされているものがあります。
やり方を調べていた所、どうやらtheme-colorというタグがあるらしいのでメモ。

テーマカラーの実装

実装方法はhead内に、metaタグを追加し、name="theme-color"をつけて任意のカラーコードを入力するだけ。


<!-- head内に追加してください -->
<head>
<meta name="theme-color" content="#ecb731">
</head>

死ぬほど簡単です。
ちなみにSEO効果はないようで、対応ブラウザも限られるそうです。内心ほくそ笑むくらいの感覚で実装しましょう。

グーグルクローム用アイコン設定

クローム用にアイコンも設定できるそうなので合わせてメモ。
こちらはfaviconと同様にhead内に画像を読み込ませるだけです。


<!-- head内に追加してください -->
<head>
<link rel="icon" href="/assets/chromeIcon.png" sizes="192x192" />
</head>

推奨サイズが192*192らしい。

対応環境

  • Android用 Chromeのバージョン 39以降
  • Android バージョン5(Lolipop)以降

はい、ほとんど対応してないです。笑
ただ今後各ブラウザ、端末での対応の可能性もあるので記憶の片鱗に残しておいても損はないと思います。