Touch Bar搭載のMacbook ProでSafariを開くとTouch Barにお気に入りに登録したサイトのアイコンが表示されますが、AppleやYoutubeはボタン全体をフルに使った綺麗なアイコンが表示されます。これを今回作ってみます。
目次
といってもWebサービスまかせ
Favicon Generator for all platforms: iOS, Android, PC/Mac…
上記サイトの右上にある「Select your Favicon picture」を押して自分のサイトのアイコン画像をアップロードするだけです。
しばらくすると、「macOS Safri」という画面が下の方に表示されます。
左に「Touch Bar (alpha feature)」と表示されてプレビューが出ています。私は「Trun your picture into a monochrom icon….」を選んで右のスライドで調整しました。
「Theme Color」で背景色を選びます。白とここで選んだ背景色の2色しか使えないようです。これはデザインセンス問われますね。
最後に「Generate your Favicons and HTML code」をクリック。
「Favicon package」のボタンを押して素材をダウンロードしてzipを解凍します。AndoroidやWindows10のタイル用の素材なんかも含まれていますが、Touch Barで使うのは「safari-pinned-tab.svg」です。これを自分のサイトのトップにアップします。
サイトの<head>〜</head>の間に以下のようなタグを入れます。colorはお好みの色を指定してください。さっきのzipをダウンロードしたページにサンプル出てますので、そちらをコピーした方がいいでしょう。
[html]<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5b67d5">[/html]
なかなか反映しない
いざ、設定してみてもこれがなかなか反映しない。それ、キャッシュが残ってます。
新しいブックマークのカタチ？Safariのページピンアイコンの実装方法。 | 和洋風KAI
Finderのメニューバーの「移動」「フォルダの移動」をクリックし、「~/Library/Safari/Template Icons」に移動して、その中のファイル（CacheSettings.plistやPNG画像）を全部削除して、Safariのタブを全部閉じて、Safariを再起動するだけ。
こらち参考にさせていただいて無事に反映しました。私の場合Safariを開いたままファイル削除しないと反映しませんでした。タブのピンアイコンとTouch Barのキャッシュクリアは微妙に条件が違うのかも。
SafariのページピンアイコンとTouch Barのアイコンは同じ設定を使う
Touch Barに表示されるお気に入りアイコンは、Safariのタブを固定化した時に表示されるアイコンと同じファイルを使うようですね。そんなわけで、A-tak.comもTouch BarだけではなくSafariでタブを固定化した場合もアイコンが表示されるようになりました。
なんかTouch Barに自分のサイトが綺麗に表示されると嬉しいですね。
関連する記事
MacBook Pro with Touch Bar トラックパッドでかすぎる問題 
Touch Barでブックマークレットを爆速実行 
Macbook Pro with Touch Bar はワクワクする 
Mackbook Pro with Touch Bar いろいろ触ってみたぞ 
非対応アプリでもOK! Touch Barが自由にカスタマイズ出来る 
MacBook AirとTouch Diamonの相性が悪いみたい MacBook Air + Diamond Touch + PSPで、まいにちいっしょポータブル Touch Diamondは自分で育てる 
MacBook AirのSSD版を買った[レビュー] 
MacBook Airのケースを求めて