HTML: Safari のピン(タブ固定時)にアイコン画像を表示する

Mac OS X 10.11 (El Capitan) の Safari から採用された ページピンのアイコンfaviconapple touch icon とは別の記述をしなければ表示されません。
また、せっかくページピン用の画像作成し、表示するためのタグを記述したにもかかわらず、表示されないケースに遭遇しました。
今回はこのページピン用に、オリジナルアイコンを表示し、確認する方法を説明したいと思います。

目次

  • SVG 画像を準備する
  • HTML を記述する
  • 確認する

Safari のピン(タブ固定時)にアイコン画像を表示する

ページピン用のアイコン画像がしていされていないサイトは、デフォルトではページタイトルの頭文字のイニシャルが表示されます。

html-safari-pinned-icon01

SVG 画像を準備する

Illustrator 等のベクター画像アプリケーションで表示したいアイコンの SVG データを作成しました。ここでは “pinned_icon.svg” という名前で書き出します。

html-safari-pinned-icon02

HTML を記述する

タグ内に 以下の1行を追加します。href に SVG 画像のパス、color に塗りの値を記述します。

<link rel="mask-icon" sizes="any" href="/images/pinned_icon.svg" color="#333333">

確認する

~/Library/Safari/ の中にある Template Icons フォルダを丸ごと消去します。
これを行わないと、サイトデータが変更前のアイコンのキャッシュへ紐付いているため、実際は結果が反映されているにも関わらず、ブラウザでページをリロードしても結果を確認できません。(これで数十分時間をロスしてしまいました。。)

html-safari-pinned-icon03

無事 HTML で指定したページピンの SVG 画像が反映されました。

まとめ

ページピンの画像は apple touch icon 同様、ちょっと一手間加えるだけで、サイトのブランディングに非常に有効です。
普段 Windows や Android をメインで使用している方も、設定方法は簡単なのでページピンのアイコン画像を設定してみてはいかがでしょうか。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents