home
スポンサーリンク
2015-10-02

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

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

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

page-pin

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

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

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

アイコン画像の用意

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

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

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

  • 黒色しか使っていないこと
  • 黒色以外は透明であること
  • 縦横比が1:1であること

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

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

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

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

サーバへ画像の配置

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

HTMLにアイコン定義の記述

設定したいサイトの<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じゃない人はお気に入りに!)

コメント

  1. Seita より:

    いろいろ試していたところ、もしかすると、設定するSVGのサイズが大きすぎると適用されないかもしれません。
    400×400以下では動作することを確認していますので、適用できない方は小さいサイズでお試しください。

コメントを残す

スポンサーリンク
スポンサーリンク
ツイートする
シェアする
オススメする
ブックマークする
購読する