Icône d'onglet épinglé Safari (mask-icon)
Safari sur macOS utilise une icône dédiée pour les onglets épinglés, déclarée avec <link rel="mask-icon" href="..." color="#...">. Le fichier est un SVG à une seule couleur composé de formes noires pleines sur fond transparent, et Safari le recolore à l'aide de l'attribut color. Elle est distincte de votre favicon normal et n'affecte que les onglets épinglés dans Safari sur ordinateur.
Un SVG monochrome, recoloré par Safari
Un mask-icon n'est pas un graphique coloré normal. Safari le traite comme un masque : vous fournissez des formes noires pleines sur fond transparent, et il les remplit avec la couleur de l'attribut color de la balise, une couleur quand l'onglet est épinglé, une autre au survol. Les dégradés, les couleurs multiples et les traits sont tous aplatis, donc le visuel doit se lire comme une seule silhouette.
Il ne pilote que les onglets épinglés dans Safari sur ordinateur. Les versions plus récentes de Safari se rabattent aussi sur votre favicon SVG ou PNG habituel, ce qui explique pourquoi beaucoup de sites ne livrent plus de mask-icon distinct du tout.
Le déclarer
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />L'attribut color est ce avec quoi Safari peint les formes noires lorsque l'onglet est épinglé.
FAQ sur les onglets épinglés Safari
Ai-je encore besoin d'un mask-icon ?
Rarement. Safari moderne se rabat sur votre favicon SVG ou PNG pour les onglets épinglés, donc un mask-icon distinct est désormais un plus plutôt qu'une nécessité.
Pourquoi mon icône d'onglet épinglé est-elle une tache pleine ?
Parce que Safari aplatit le mask-icon en une seule silhouette et la remplit avec l'attribut color. Tout détail porté par la couleur ou un dégradé est perdu. Ce sont les formes elles-mêmes qui doivent définir la marque.
Quel format l'icône d'onglet épinglé nécessite-t-elle ?
Un SVG de chemins noirs pleins sur fond transparent. Pas un PNG, et pas un SVG multicolore. Safari n'utilise que la géométrie et applique sa propre couleur.