---

OS X El Capitan (10.11)に搭載されているSafari 9の新機能の一つに、ページピン機能がある。 Safari上ではタブを固定とも表記されており、タブを一番左まで持っていくか、右クリックから選択することで固定できる。 その際に、ちょうどfaviconサイズのアイコンが表示される仕組みになっている。 OS Xをバージョンアップして、当然このピン機能も試してみたが、期待していたのとは様子が少し異なっている。

というのも、表示されるのはfaviconではなく、別途設定したアイコン用画像になる。 設定のないページでは、ドメイン名の頭文字が表示されるようだ。 例えば、irodori.one-poem.jpではOと表示される（Iではない）。 日本語ドメインでも、日本語.jpの場合は日と表示された。 Googleニュース(news.google.co.jp)とInbox by Gmail(inbox.google.com)を同時にピン留めすると、通常見分けはつかない。 アイコン部分にマウスカーソルを合わせると、ページの背景色に合わせて、文字部分の背景色も変化するが、マウスカーソルが他の場所にある場合はグレーアウトされており、この色で区別するのは厳しいと思う。

そのため、サイト側としては、独自にページピン用アイコンを用意するのが良いということになる。 私も、favicon用に作ったSVGファイルを流用したいと思い、指定の方法を調べてみた。

まず、各種ブラウザのSVG faviconへの対応情報の脚注から、link要素のrel属性にてmask-iconと指定すれば良さそうだと判断した。 しかし、やってみるもののうまく表示されない。 よく見ると、all-black iconでしか動作しないとある。 真っ黒なアイコンとはなんだろうということで、Appleによるページピンに関する公式情報を参照した。

Appleの公式情報を読んでみると、背景が透明で、すべてのベクターが黒でできているSVG画像が必要とのことだ。 さらに、link要素のcolor属性にて、実際の表示の際に使う色を指定することになる。 こんな回りくどいことをせずに、色つきのSVG画像をそのまま使えばいいように思えるが、上記のようにページピン用アイコンは、通常グレーアウトされているため、黒の方が都合がいいということなのだろう。

ということで黒のみの色でできたSVG画像を用意したが、これでも表示されない。 しかも何度かリロードしている間に、ドメイン名の頭文字すら表示されなくなった。 すでに対応済みのMacお宝鑑定団さんのページの情報も見てみるが、自分のところができない理由がよく分からない。 しかもMacお宝鑑定団さんの場合、元々赤のアイコンを使用されているのに、きちんと表示されている。

XHTMLで書いているのがダメなのじゃないかとか、いろいろ試してみたが、うまく表示されない。 最終的に、なぜかSVG faviconに関するFirefoxのサイト互換性情報にたどり着き、ページピン用アイコンは他のアイコンに関する指定よりも、前に書いた方がいいということがわかった。 Firefoxのfaviconは、一番最後に書かれたものを使うそうなので、うまく設定すれば競合せずに済むが、逆に指定すると両方でうまく表示されないというわけだ。 しかも、上記のFirefoxの情報から辿れるAppleの公式情報を改めて読むと、こちらにはきちんとそのようなことが書いてあるし、指定の方法も先ほどの公式情報とは違うことが書いてある。

よくよくURLを確認すると、私が最初に見ていたページはリリース前の情報で、Firefoxの情報から辿れるページこそが最終的なリリース情報だったのだ。 上記の文中でリリース前の情報のみに基づく部分には、打ち消し線を入れてある。 ページピン用アイコンに関するlink要素の位置さえあっていれば、リリース前の版の書式で書いても問題ないようだが、以下に表記の仕方をまとめておく。 色については名前で指定することもできるし、16進数表記やrgb()を使うこともできる。

リリース前の書式 (XHTML式)

<link rel="mask-icon" href="website_icon.svg" color="red" />

リリース後の書式 (XHTML式)

<link rel="icon" sizes="any" mask="mask" href="website_icon.svg" />
<meta name="theme-color" content="red" />

ちなみに、やはり黒のみのSVG画像でなくても動作するようだ。 色々と振り回された感じである。