Cómo crear un icono para pestañas fijadas de Safari
¿Alguna vez has fijado una pestaña en Safari y te has preguntado por qué tu favicon, tan bien diseñado, se convierte en una aburrida letra gris? No eres el único. No es un error; es una característica, y requiere un tipo de icono especial.
El icono para pestañas fijadas de Safari es un archivo SVG monocromático único que Apple utiliza para mantener su interfaz de usuario limpia y coherente. Es completamente diferente de tu favicon.ico estándar o incluso del Apple Touch Icon, que se usa para los marcadores de la pantalla de inicio en iOS.
Piénsalo como un uniforme especial que tu icono debe llevar para ser admitido en el exclusivo club de las pestañas fijadas de Safari. Así es como se hace.
Requisitos previos
Antes de empezar, necesitarás dos cosas:
- Una versión vectorial de tu logo (en formato SVG, AI o EPS).
- Acceso a la sección
<head>del HTML de tu sitio web para añadir una línea de código.
Paso 1: Prepara tu SVG monocromático
Safari ignora todos los colores dentro de tu archivo SVG. Solo le importa la forma. Tu trabajo es proporcionar una forma vectorial limpia, de un solo color, que funcione como una silueta.
Primero, abre tu logo en un editor de vectores como Figma, Sketch o Adobe Illustrator. Elimina cualquier texto, degradado o múltiples colores. Quieres una única forma sólida. Si tu logo es complejo, tendrás que simplificarlo. Un buen icono para pestañas fijadas es como un buen icono de aplicación: reconocible al instante. Para más información sobre esto, consulta nuestra guía sobre la diferencia entre un favicon y un logo.
A continuación, establece el color de relleno de la forma en negro (#000000). Safari lo sobrescribirá con su propio color o el color de tema que especifiques, pero establecerlo en negro es una buena práctica.
Finalmente, exporta el archivo como SVG. Asegúrate de que tu SVG tenga un atributo viewBox y no esté lleno de metadatos innecesarios. (Herramientas como SVGOMG son geniales para limpiar esto).
Paso 2: Añade la etiqueta link de HTML
Ahora, necesitas decirle a Safari dónde encontrar tu nuevo icono. Añade la siguiente línea de código dentro de la etiqueta <head> de tu documento HTML:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">Analicemos esto:
rel="mask-icon": Este es el atributo especial que identifica el icono como el destinado a las pestañas fijadas de Safari. No es un enlace de favicon estándar.href="/safari-pinned-tab.svg": La ruta a tu archivo SVG. Es una buena práctica nombrarlo así y colocarlo en el directorio raíz de tu sitio.color="#5bbad5": Este es el color principal de tu marca. Safari usa este color para colorear el icono al pasar el cursor sobre él o cuando la pestaña está activa. Elige un color que tenga buen contraste con los temas claro y oscuro de la interfaz de Safari.
Echa un vistazo a la implementación de Stripe. Usan su logo simple y limpio como un SVG y establecen el atributo de color a su característico morado (#635bff). Es un ejemplo perfecto de cómo este pequeño detalle refuerza la marca.
Paso 3: Sube el archivo y pruébalo
Sube tu archivo safari-pinned-tab.svg recién creado a tu servidor web, en la ubicación que especificaste en el atributo href. Una vez que esté en línea, abre tu sitio en Safari, haz clic derecho en la pestaña y selecciona "Fijar pestaña".
Deberías ver aparecer tu nítido icono monocromático. Si no es así, que no cunda el pánico. La caché suele ser la culpable.
Errores comunes y cómo solucionarlos
Hacer esto bien a veces puede ser complicado. Aquí hay algunos problemas comunes con los que se encuentran los desarrolladores.
1. El icono parece una mancha borrosa
Esto generalmente significa que tu SVG es demasiado detallado. El icono de la pestaña fijada es diminuto, por lo que las líneas intrincadas y los pequeños espacios simplemente se fusionarán en una mancha. Vuelve a tu editor de vectores y simplifica la forma. Piensa en algo audaz y simple.
2. Safari sigue mostrando el icono antiguo (o una letra)
Safari es conocido por ser muy agresivo con el almacenamiento en caché de favicons. Limpiar la caché del navegador no siempre funciona. Para forzar una actualización, es posible que necesites ir a Safari > Ajustes > Privacidad > Gestionar datos de sitios web, buscar tu sitio y eliminarlo. Es un poco drástico, pero es la forma más fiable de forzar a Safari a volver a buscar el icono.
3. El color es incorrecto
Recuerda, Safari ignora cualquier color definido dentro del propio archivo SVG. El *único* color al que presta atención es el que estableces en el atributo color de la etiqueta <link>. ¡Revisa bien ese código hexadecimal!
Configurar un icono para las pestañas fijadas de Safari es un detalle pequeño pero significativo. Demuestra que te preocupas por la experiencia del usuario en todas las plataformas y completa un paquete de favicon profesional. Es uno de esos detalles que, una vez que lo ves, no puedes dejar de notarlo en los sitios que lo descuidan.