Abrir convertidor
Icono de pestaña fijada de Safari (mask-icon)
Autor: Augusto Cesar Perin • Actualizado: 30 sep 2025
Añade un icono de pestaña fijada con link rel="mask-icon". Usa un SVG monocromo y elige el color de mask-icon . IcoSmith exporta el SVG y el paquete completo de favicon.
Cómo añadir
Genera tu paquete de favicon (ICO + PNGs). Prepara un SVG simple y monocromático para Safari.
Coloca safari-pinned-tab.svg en /public.
Añade esto a tu <head>:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a">
FAQ
¿Cómo añadir un mask-icon? Inserta <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> dentro del <head>.¿Qué SVG usar? Un SVG monocromo, sin trazos/degradados y con márgenes para no recortar a 16–32 px.
Consejos
Prefiere rellenos de un solo color; evita trazos y degradados.
Deja márgenes para no recortar la forma en 16–32 px.
Prueba en fondos claros y oscuros.
Errores comunes
Usar SVG multicolor o trazos muy finos que desaparecen en tamaños pequeños.
Olvidar el atributo color: Safari usa ese valor para pintar el icono.
Publicar solo el mask-icon sin el set ICO/PNG para otros contextos.
Validación
Comprobar en Network que safari-pinned-tab.svg responde 200 y sin errores CSP.
Fijar la pestaña en Safari (macOS) y verificar contraste en claro/oscuro.
Ejecutar Lighthouse y asegurar que no hay 404 y los íconos tienen cache.
Abrir convertidor