Apple: Safari 9のページピン用アイコン（再挑戦）
先日Safari 9のページピン用アイコンの作成に四苦八苦した記事を書いたが、やはりうまく動作していないことがわかった。 というのも、当初はfaviconと同じデザインのものを黒くしただけだったが、色がない場合は線が太いほうが見やすいと思い、アイコンのデザインを変えてデータを入れ替えたものの、うまく反映されないのだ。 どうもページピン用アイコンは一度設定されるとキャッシュに残る仕組みのようで、ページを再読み込みした程度では変更されないようだ。 手順は後でまとめて書くが、キャッシュを消してアイコンを読み直そうとすると、今度はアイコンが表示されなくなった。 そのため、どうも設定が間違っていたようだと気付いた。 前回上手くいったように見えたのは、途中の段階で一旦正しい設定がされ、そこで読み込んだアイコンがずっとキャッシュされて表示されていたということだろう。
- favicon用アイコン「わ」
- ページピン用アイコン「わ」
さて原因がわかったのは、ページピン用アイコンの設定の仕方を書いた海外のブログ記事を見つけたから。 これを見ると、当初私がリリース前の情報と思っていた方法が正しいようだ。 これはおかしいと思って改めてAppleによるリリース後の公式情報を見てみると、リリース前の情報と思っていた内容と同じことが書いてある。 さては私がリリース前の情報と見間違えたか？と思ったが、そちらも同じ内容だ。 リリース前の情報を更新したのかな、と思ったが、念のためWeb Archiveで確認すると、なんとリリース後の公式情報が一時期古いままになっていたようで、これにはがっくりだ。
ともかく、今回私がやり直した手順は以下のとおり。 すべてのWebサイトのデータの消去や、Macの再起動が必要と書かれているサイトもあったが、どちらもしなくても、以下の手順でうまくいった。
- 黒で構成されたSVGアイコンを用意する（カラーのアイコンでも一応表示を試みるようだが、白の部分も塗りつぶされてしまうようで、私のfavicon用アイコンを使うと、「わ」が表示されずに真っ黒のように見えてしまう）。
- head要素で他のアイコンに関する指定よりも前に、
<link rel="mask-icon" href="website_icon.svg" color="red" />のように記載を行う。 - 色の指定は16進数表記でも、
rgb()表記でも問題ない。 - Safariのページピン用アイコンのキャッシュは、
ライブラリ/Safari/Template Iconsの中にある。ライブラリはaltを押しながらFinderの移動メニューを開くとアクセスできる。 - このフォルダの中にある、
CacheSettings.plistを含むすべてのファイルを削除する。 - Safariを再起動すると、ページピン用アイコンが再読み込みされる。
ちなみに上手くいくと、キャッシュフォルダにはアイコンがPNG形式で保管されるようだ。 だったらSVGでアイコンを用意させなくても良いように思えるが・・・。 サイズの変更など将来への布石だろうか。