Safari のピンタブアイコン（mask-icon）
macOS の Safari は、ピン留めタブ用に専用のアイコンを使い、<link rel="mask-icon" href="..." color="#..."> で宣言します。そのファイルは、透明な背景に黒一色の図形で描かれた単色の SVG で、Safari は color 属性を使って色を付け直します。通常のファビコンとは別物で、デスクトップの Safari のピン留めタブにのみ影響します。
モノクロ SVG を、Safari が塗り直す
mask-icon は通常の色付きグラフィックではありません。Safari はそれをマスクとして扱います。透明な背景に黒一色の図形を渡すと、Safari がタグの color 属性の色で塗りつぶし、ピン留め時は一色、ホバー時は別の色にします。グラデーション、複数色、線はすべて平坦化されるため、アートワークは一つのシルエットとして読める必要があります。
これはデスクトップ Safari のピン留めタブだけを駆動します。新しい Safari のバージョンは通常の SVG や PNG のファビコンにもフォールバックするため、多くのサイトはもはや別途 mask-icon を出荷していません。
宣言の仕方
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />color 属性は、タブがピン留めされたときに Safari が黒い図形を塗る色です。
Safari のピンタブに関するよくある質問
mask-icon は今も必要ですか？
ほとんど必要ありません。最近の Safari はピン留めタブに SVG や PNG のファビコンをフォールバックとして使うため、別途の mask-icon はもはや必須ではなく、あれば嬉しい程度のものです。
なぜピン留めタブのアイコンが真っ黒の塊になるのですか？
Safari が mask-icon を一つのシルエットに平坦化し、color 属性で塗りつぶすからです。色やグラデーションが担っていたディテールは失われます。図形自体がマークを定義しなければなりません。
ピン留めタブのアイコンはどのフォーマットが必要ですか？
透明な背景に黒一色のパスで描かれた SVG です。PNG でも、複数色の SVG でもありません。Safari はジオメトリだけを使い、自身の色を適用します。