Macbook Pro Touch Bar用のお気に入りアイコンを作った

2016112620161126touch bar icon 01

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をダウンロードしたページにサンプル出てますので、そちらをコピーした方がいいでしょう。

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5b67d5">

なかなか反映しない

いざ、設定してみてもこれがなかなか反映しない。それ、キャッシュが残ってます。

新しいブックマークのカタチ?Safariのページピンアイコンの実装方法。 | 和洋風KAI

Finderのメニューバーの「移動」「フォルダの移動」をクリックし、「~/Library/Safari/Template Icons」に移動して、その中のファイル(CacheSettings.plistやPNG画像)を全部削除して、Safariのタブを全部閉じて、Safariを再起動するだけ。

こらち参考にさせていただいて無事に反映しました。私の場合Safariを開いたままファイル削除しないと反映しませんでした。タブのピンアイコンとTouch Barのキャッシュクリアは微妙に条件が違うのかも。

SafariのページピンアイコンとTouch Barのアイコンは同じ設定を使う

Appleアイコンと自分のサイトのアイコンを並べよう

Appleアイコンと自分のサイトのアイコンを並べよう

Touch Barに表示されるお気に入りアイコンは、Safariのタブを固定化した時に表示されるアイコンと同じファイルを使うようですね。そんなわけで、A-tak.comもTouch BarだけではなくSafariでタブを固定化した場合もアイコンが表示されるようになりました。

なんかTouch Barに自分のサイトが綺麗に表示されると嬉しいですね。

関連記事はCMの下をご覧ください

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA