Añade a tu web un icono para las pestañas fijas en Safari

Las pestañas fijas, o pinned tabs, es la nueva propiedad de Safari en OS X El Capitan que permite fijar todas las webs que queramos en la barra de pestañas.

Estas pestañas fijas están siempre presentes en la ventana de Safari, independientemente de si tenemos muchas pestañas abiertas o de si cerramos y volvemos a abrir la ventana.

Es una propiedad que ya nos es conocida por otros navegadores, pero que Apple ha decido implementar con un icono de mayor tamaño que el resto de los navegadores –que usan el favicon de la propia web. Por ello, es necesario que implementemos unas metaetiquetas en nuestra web para que Safari muestre el icono que queramos en vez de la inicial del nombre de la web.

Dos metaetiquetas serán las que debemos implementar: la primera especifica la ubicación del icono y la segunda el color que queremos que tenga cuando pasamos el cursor por la pestaña fijada. Por esta razón, hay una serie de condiciones que deben cumplir nuestros logotipos y la ubicación de las metaetiquetas.

• El icono ha de ser un logotipo vectorizado, estar en formato .svg y ser totalmente negro.
• Las metaetiquetas debe aparecer antes que otras metaetiquetas que especifiquen cualquier tipo de icono ¹Esto se hace para evitar posibles errores a la hora de interpretar las metaetiquetas.
• La especificación del color puede ser hecha en formato hexadecimal, RGB o por colores reconocidos por palabras.

Una vez preparado todo, lo único que tendremos que hacer será incluir ambas metaetiquetas:

<link rel="icon" sizes="any" mask href="ubicacion/del/icono.svg">

<meta name="theme-color" content="#Colorelegido">


Al incluirlas, Safari detectará automáticamente este icono y será el que esté siempre en las pestañas fijas de la gente que añada tu web con esta nueva propiedad presentada en la WWDC de 2015. Si no queremos implementar esta opción, lo que saldría en su lugar es un recuadro del color más vistoso de nuestra plantilla con la inicial en blanco del título de la web.

Está dando mucho de que hablar esta forma de implementar los iconos por parte de Apple. Es posible que exista incompatibilidades con otros navegadores (no hasta donde yo he visto), por eso no sería raro que Apple cambiase este método. De momento no es previsible, pero a lo mejor el día del lanzamiento las cosas han cambiado.

Más info Apple