OS X El CapitanのSafari 9のページピン機能用アイコンを設定する方法

先日10月1日未明に、Macintoshの新しいOS「OS X 10.11 El Capitan」がリリースされました。

その「OS X El Capitan」にインストールされている「Safari 9」では、よく使うタブを固定する「ページピン」機能が追加されています。

この機能により、上の画像のように、よく見るサイトを常に固定しておくことができるため、非常に便利です。

ただ、ここに表示されるアイコンですが、実はファビコン（favicon.ico）を単に表示しているわけではなく、サイト側で新たに画像を設置し、コンテンツを設定しないと表示されないようになっています。

今回はその方法を解説します。

アイコン画像の用意

まず始めに、使う画像を用意するわけですが、ここに設定する画像はSVG形式のもののみ可能となっています。SVGは、ベクターイメージの画像形式で、こちらに詳しい説明があります。

なので、まずアイコン用のSVG形式の画像を用意してください。

ただ、一つ注意点として、このアイコンに設定できる画像には制約があります。それは、

ということです。アイコンの色は一色しか使えない仕様で、その色は後から指定します。ですので、まずは黒一色の正方形アイコンを用意しましょう。

Googleなどで「SVG アイコン」と調べると、アイコンのサンプルが見つかるので、試してみたい方はそちらからどうぞ。

また、世の中にはPNG形式をSVG形式に変換できるツールとかもあったりしますので、PNGから変換したい方は、そのようなツールをご利用ください。

SVGを編集したいという方は、オープンソースソフトウェアの「Inkscape」が便利です。カラーのSVGしか持っていない！という方は、このツールで黒一色に編集してください。

インターネット公開されているWebサーバの任意の場所に、用意した画像を配置してください。WordPressで運用している方は、メディアにアップロードしても構いません。

設定したいサイトの<head>タグ内に、以下の記述を追加してください。

<link rel="mask-icon" href="[用意したアイコンのURL]" color="[アイコンの色を指定]">

先ほどこのブログにも適用しましたが、以下のようになっています。

<link rel="mask-icon" href="/mask-icon.svg" color="#000000">

以上で設定完了です。

表示確認時の注意点が一つあります。それは、適用後の確認を取るのに再起動が必要だという点です。

今後直るかもしれませんが、私の場合は、ブラウザのキャッシュを全て削除（[Safafiの環境設定]→[プライバシー]→[全てのWebサイトデータを削除]）して、その後OSを再起動することで、再起動後のSafariでようやくアイコン適用の確認が取れました。

なかなか適用されず設定が間違っているのかと思っていたら、まさかのキャッシュが原因のようでした。おそらく、Safariとは別のOS X側のキャッシュが使われているのでしょう。

以上で、設定完了となります。単にファビコンを表示する仕組みにしてくれればこんな面倒なことはしなくてよかったんですが、Safariはもともとファビコンを表示しないブラウザだったので、Appleは元来何らかの理由でファビコンが嫌いなんでしょうね。

ぜひ皆さんもページピンのアイコンを設定して、閲覧者にアピールしてみてください。

ちなみに、うちのサイトもページピンアイコン対応してるので、これを機に左上に固定させてみてくださいお願いします！！！（Safariじゃない人はお気に入りに！）