El Capitan Safari の固定タブ機能、ページピン。アイコンを表示させるには

Pagepin Icon

Advertisement

<link rel="icon" sizes="any" mask href="hogehoge.svg">  
<meta name="theme-color" content="#000000"> 
を入れるだけ。
普通のFaviconは今のところ反映されないみたい。

もちろん
<link rel="mask-icon" href="hogehoge.svg" color="#000000">
でも可。

※hogehoge.svg #000000 は任意で変更してください。

SVGは
<path =d
が複数あると上手く動かなかったので一つにし、viewBox=”0 0 16 16″が良いとありましたが、TwitterなどのSVGを見ると、viewBox=”0 0 72 72″ となってるのでどちらでも良いのかも。

僕のとこのSVGはこんな感じ。
普通にイラレで吐き出してから少し書き換えただけです。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M1.4,7.2c0,0.8,1,1.7,1.7,1.7C4.7,9,5.4,8.2,5.9,8c0.9-0.3,1.4-0.3,2.2-0.3c1.3,0,1.6,0.5,1.6,0.5H10
	c0,0,0.5-0.5,1.2-0.5c0.6,0,1,0.3,1.3,0.6c0.5,0.5,1.3,1.3,1.7,1.3s0.6-0.5,0.6-0.6c0-0.5-0.3-0.7-0.6-0.7c-0.3,0-0.5,0.1-0.7,0.5
	l0,0c0-0.7,0.3-1,0.8-1c0.9,0,1.4,0.8,1.4,1.4c0,1.6-1.4,2.1-2.2,2.1c-2.3,0-3-1-3.5-1.7H9.7c-0.9,1.3-2.3,1.9-5.6,1.9
	c-1.4,0-2.3-0.7-3-1.7C0.7,9,0.6,8.2,0.6,7.5c0-1.2,0.9-2.2,2.2-2.2c0.6,0,1.4,0.5,1.4,1.4c0,0.5-0.3,0.8-0.9,0.8
	C2.9,7.5,2.8,7.3,2.8,7c0-0.1,0.1-0.2,0.1-0.2L3,6.6c0,0,0,0,0.1,0l0,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0.2S3,7.2,3.3,7.2
	c0.2,0,0.6-0.2,0.6-0.7c0-0.7-0.6-0.9-1.2-0.9C2.3,5.8,1.4,6,1.4,7.2z"/>
</svg>

一つ面倒なのは、safariがピンのアイコンをキャッシュさせて更新気づきづらいので

Finder > 移動 > ライブラリ > Safari > Template Icons

の中身を削除してSafariを再起動させて確認してください。

早く色んなサイトに導入されてほしいな。
WEBツールは固定させておきたいので。