Icono de pestaña anclada de Safari (mask-icon)
Safari en macOS usa un icono dedicado para las pestañas ancladas, declarado con <link rel="mask-icon" href="..." color="#...">. El archivo es un SVG de un solo color hecho de formas negras sólidas sobre un fondo transparente, y Safari lo recolorea usando el atributo color. Es independiente de tu favicon normal y solo afecta a las pestañas ancladas en Safari de escritorio.
Un SVG monocromo, recoloreado por Safari
Un mask-icon no es un gráfico coloreado normal. Safari lo trata como una máscara: proporcionas formas negras sólidas sobre un fondo transparente, y él las rellena con el color del atributo color de la etiqueta, un color cuando está anclada, otro al pasar el ratón. Los degradados, los múltiples colores y los trazos se aplanan todos, así que el diseño tiene que leerse como una única silueta.
Solo controla las pestañas ancladas en Safari de escritorio. Las versiones más recientes de Safari también recurren a tu favicon SVG o PNG habitual, por lo que muchos sitios ya no incluyen un mask-icon aparte.
Cómo declararlo
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />El atributo color es con lo que Safari pinta las formas negras cuando la pestaña está anclada.
Preguntas frecuentes sobre la pestaña anclada de Safari
¿Sigo necesitando un mask-icon?
Rara vez. Safari moderno recurre a tu favicon SVG o PNG para las pestañas ancladas, así que un mask-icon aparte es ahora un detalle en vez de un requisito.
¿Por qué mi icono de pestaña anclada es un borrón sólido?
Porque Safari aplana el mask-icon a una única silueta y la rellena con el atributo color. Cualquier detalle aportado por el color o el degradado se pierde. Las formas en sí tienen que definir la marca.
¿Qué formato necesita el icono de pestaña anclada?
Un SVG de trazados negros sólidos sobre un fondo transparente. Ni un PNG, ni un SVG multicolor. Safari usa solo la geometría y aplica su propio color.