Abrir conversor
Ícone de aba fixada do Safari (mask-icon)
Autor: Augusto Cesar Perin • Atualizado: 30 set 2025
Adicione um ícone de aba fixada com link rel="mask-icon". Use um SVG monocromático e escolha a cor do mask-icon . O IcoSmith exporta o SVG e o pacote completo de favicon.
Como adicionar
Gere seu pacote de favicon (ICO + PNGs). Prepare um SVG simples e monocromático para o Safari.
Coloque safari-pinned-tab.svg em /public.
Adicione isto ao seu <head>:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a">
FAQ
Como adicionar um mask-icon? Insira <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> no <head>.Qual SVG usar? Um SVG monocromático, sem strokes/gradientes e com margens para não recortar em 16–32 px.
Dicas
Prefira preenchimentos de cor única; evite strokes e degradês.
Deixe margens para não cortar a forma em 16–32 px.
Teste em fundos claros e escuros.
Erros comuns
Usar SVG multicolorido ou com strokes finos que somem em tamanhos pequenos.
Esquecer o atributo color: o Safari usa esse valor para pintar o ícone.
Publicar apenas o mask-icon sem o conjunto ICO/PNG para outros contextos.
Validação
Verifique no Network se safari-pinned-tab.svg responde 200 e sem erros de CSP.
Fixe a aba no Safari (macOS) e confira contraste em claro/escuro.
Rode o Lighthouse; garanta ausência de 404 e bom cache.
Abrir conversor