Ícone de Aba Fixada do Safari (mask-icon)
O Safari no macOS usa um ícone dedicado para abas fixadas, declarado com <link rel="mask-icon" href="..." color="#...">. O arquivo é um SVG de cor única feito de formas pretas sólidas sobre um fundo transparente, e o Safari o recolore usando o atributo color. Ele é separado do seu favicon normal e afeta apenas as abas fixadas no Safari de desktop.
Um SVG monocromático, recolorido pelo Safari
Um mask-icon não é um gráfico colorido normal. O Safari o trata como uma máscara: você fornece formas pretas sólidas sobre um fundo transparente, e ele as preenche com a cor do atributo color da tag, uma cor quando fixada, outra ao passar o mouse. Gradientes, múltiplas cores e traços são todos achatados, então a arte precisa ser legível como uma única silhueta.
Ele só controla abas fixadas no Safari de desktop. Versões mais novas do Safari também recorrem ao seu favicon SVG ou PNG comum, e é por isso que muitos sites já não entregam um mask-icon separado.
Declarando-o
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />O atributo color é o que o Safari usa para pintar as formas pretas quando a aba está fixada.
Perguntas frequentes sobre aba fixada do Safari
Ainda preciso de um mask-icon?
Raramente. O Safari moderno recorre ao seu favicon SVG ou PNG para abas fixadas, então um mask-icon separado é agora um mimo em vez de um requisito.
Por que o ícone da minha aba fixada é um borrão sólido?
Porque o Safari achata o mask-icon em uma única silhueta e a preenche com o atributo color. Qualquer detalhe carregado por cor ou gradiente é perdido. As próprias formas precisam definir a marca.
Qual formato o ícone de aba fixada precisa ter?
Um SVG de caminhos pretos sólidos sobre um fundo transparente. Não um PNG, e não um SVG multicolorido. O Safari usa apenas a geometria e aplica sua própria cor.