Иконка закреплённой вкладки Safari (mask-icon)
Safari на macOS использует отдельную иконку для закреплённых вкладок, объявляемую через <link rel="mask-icon" href="..." color="#...">. Файл — это одноцветный SVG из сплошных чёрных фигур на прозрачном фоне, а Safari перекрашивает его с помощью атрибута color. Он отделён от вашего обычного favicon и влияет только на закреплённые вкладки в десктопном Safari.
Монохромный SVG, перекрашиваемый Safari
mask-icon — это не обычная цветная графика. Safari относится к нему как к маске: вы предоставляете сплошные чёрные фигуры на прозрачном фоне, а он заливает их цветом из атрибута color тега — одним цветом, когда вкладка закреплена, другим при наведении. Градиенты, несколько цветов и штрихи — всё это сводится к плоскости, так что графика должна читаться как единый силуэт.
Он управляет только закреплёнными вкладками в десктопном Safari. Новые версии Safari также откатываются к вашему обычному SVG или PNG favicon, поэтому многие сайты больше вообще не отдают отдельный mask-icon.
Как его объявить
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />Атрибут color — это то, чем Safari красит чёрные фигуры, когда вкладка закреплена.
Частые вопросы о закреплённой вкладке Safari
Нужен ли мне ещё mask-icon?
Редко. Современный Safari откатывается к вашему SVG или PNG favicon для закреплённых вкладок, так что отдельный mask-icon теперь скорее приятное дополнение, чем необходимость.
Почему моя иконка закреплённой вкладки — сплошное пятно?
Потому что Safari сводит mask-icon к единому силуэту и заливает его цветом из атрибута color. Любая деталь, переданная цветом или градиентом, теряется. Знак должны определять сами фигуры.
Какой формат нужен иконке закреплённой вкладки?
SVG из сплошных чёрных путей на прозрачном фоне. Не PNG и не многоцветный SVG. Safari использует только геометрию и применяет собственный цвет.