キミのWebページのタブはまだ白いままか？！（2行で出来る Android Lolipop Chrome 対応）

最近、スマホでウェブサイト見てて気付いたこと。

f:id:nekonenene:20160206174611p:plain

あれ？そこ、色付けられるようになってる……？

１週間前くらいからでしょうか、
気が付いたらそこに色が付いていました。

1. そこってどこ？

ここ
f:id:nekonenene:20160206175633p:plain f:id:nekonenene:20160206175637p:plain

Android の Chrome ブラウザ におけるアクションバーの位置ですね。

2. goo も Yahoo! も対応してないけど、対応してるサイトあるの？

はてなブログ以外には、

Steam とか…
f:id:nekonenene:20160206181533p:plain

オモコロ とか…
f:id:nekonenene:20160206181535p:plain
響子ちゃんかわいい、五十嵐響子ちゃんかわいい

GoogleDev とか。
f:id:nekonenene:20160206181536p:plain

まあ、一番最後のとこは当たり前ですね(笑)
今回の話題について説明している公式ページなのですからなおさら。

ちなみに、こういうのにいち早く対応してそうなカヤックさんや LIG さんは、まだ未対応でした。
f:id:nekonenene:20160206183525p:plain f:id:nekonenene:20160206183527p:plain
LIG さんは新起動（ジェニシス）するのに時間がかかっているのかもしれません。
（っていうか LIG のテーマカラーって？）

3. 前置きはいいからやり方は？

２行で終わるので無駄に前置きが長くなりました。
ページのHTMLヘッダーに、こう書きます。

<meta name="theme-color" content="ページのテーマカラーを指定">
<link rel="icon" href="png画像の場所を指定">

おっと、２行目の意味の説明がまだでしたね。

Chrome の設定の「タブとアプリの統合」がオンの時、
最近使ったアプリ一覧に、Chrome で開いているタブ一覧も、アプリのように表示されるようになります。

f:id:nekonenene:20160206185021p:plain f:id:nekonenene:20160206185109p:plain

そして、link rel="icon" が未設定の場合はこのように、
左端のアイコン部分がドメイン名の初めの一文字になってしまいます。

http://hato-neko.x0.com/
の x0 の X なわけです。
自分のドメイン名を持っていない人は致命的ですね。

4. 対応させるとこうなる

私の場合は、favicon を作った時の画像を 192px × 192px の png 画像にしてサーバに置き、
Webページの HTML のヘッダーを、以下のようにしました。

<head>
  <!-- ～～～いろいろありますが、本筋でないので省略～～～ -->
  
  <link rel="shortcut icon" href="favicon.ico">
  <title>ハトネコエセンター</title>

  <!-- for Android SmartPhone -->
    <meta name="theme-color" content="#ffe0e0">
    <link rel="icon" sizes="192x192" href="./faviconA5_192.png">
</head>