Mac OS X 10.11 (El Capitan) の Safari から採用された ページピンのアイコン は favicon や apple touch icon とは別の記述をしなければ表示されません。
また、せっかくページピン用の画像作成し、表示するためのタグを記述したにもかかわらず、表示されないケースに遭遇しました。
今回はこのページピン用に、オリジナルアイコンを表示し、確認する方法を説明したいと思います。
目次
- SVG 画像を準備する
- HTML を記述する
- 確認する
Safari のピン（タブ固定時）にアイコン画像を表示する
ページピン用のアイコン画像がしていされていないサイトは、デフォルトではページタイトルの頭文字のイニシャルが表示されます。
SVG 画像を準備する
Illustrator 等のベクター画像アプリケーションで表示したいアイコンの SVG データを作成しました。ここでは “pinned_icon.svg” という名前で書き出します。
HTML を記述する
タグ内に 以下の１行を追加します。href に SVG 画像のパス、color に塗りの値を記述します。[code] [/code]
確認する
~/Library/Safari/ の中にある Template Icons フォルダを丸ごと消去します。
これを行わないと、サイトデータが変更前のアイコンのキャッシュへ紐付いているため、実際は結果が反映されているにも関わらず、ブラウザでページをリロードしても結果を確認できません。（これで数十分時間をロスしてしまいました。。）
無事 HTML で指定したページピンの SVG 画像が反映されました。
まとめ
ページピンの画像は apple touch icon 同様、ちょっと一手間加えるだけで、サイトのブランディングに非常に有効です。
普段 Windows や Android をメインで使用している方も、設定方法は簡単なのでページピンのアイコン画像を設定してみてはいかがでしょうか。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
