Un favicon es el pequeño icono que aparece junto al título de una página web en la etiqueta de la pestaña del navegador.
Los favicons existen en Internet desde hace mucho tiempo pero dado que muchos sitios web se han reconvertido en aplicaciones web, han modificado la manera de ser implementados.
Las resoluciones de los íconos de aplicaciones varían entre cada distinto dispositivo y entre cada diferente navegador.
Por lo tanto, los íconos deben existir en una variedad de tamaños, para que el equipo de desarrollo pueda realizar la integración correcta de los favicons en sus sitios web.
¿Por qué son importantes los favicons?
Los favicon son importantes porque forman parte de la identidad de tu sitio web, los usuarios son capaces de recordarlos y reconocerlos y asociarlos a tu web.
Los íconos también contribuyen a la coherencia general de la marca y su ausencia, puede ser considerada como un punto poco profesional.
Los favicons también facilitan el encontrar más rápido una pestaña de tu página web, entre una gran multitud de pestañas.
¿Dónde se utilizan los favicons?
Los favicons se utilizan en las pestañas del navegador, el historial del navegador, las aplicaciones de la barra de herramientas, el menú desplegable de marcadores, la barra de búsqueda y las recomendaciones de la barra de búsqueda.
En todos esos lugares, especialmente en las pestañas de marcadores y el historial, el favicon sirve como un objeto diferenciador que facilita encontrar tu sitio web.
Bien, llegados a este punto, repasemos un poco sobre los tamaños de favicon y los íconos táctiles para cada tipo de dispositivos.
Favicon u Ícono de Página Web
En el pasado, siempre se utilizaba un pequeño archivo llamado
favicon.ico
y ese archivo
.ico
contenía varios archivos
.png
en un mismo rango de diferentes tamaños (porque los favicons, incluso en ese entonces, también se usaban para los iconos de acceso directo del escritorio).
Desde la introducción de los atributos
sizes
en HTML5, ya no se necesita comprimir los archivos
.png
en un formato
.ico
(aunque los navegadores aún son compatibles con
.ico
).
El nuevo formato estándar de los favicons es siempre el tipo de archivos
.png
.
Tamaños de los Favicon
Una vez concretado el tipo de archivo que se utiliza para la creación de un *favicon**, queda por aclarar el tamaño necesario.
¿Qué tamaños y dimensiones estándar (en píxeles) deber tener un favicon?
Los tamaños estandar son 16×16 para un favicon de navegador*, **32×32 para un icono de acceso directo de la barra de tareas y 96×96 para un icono de acceso directo de escritorio (o Google TV).
Esta sería la sintaxis HTML5 para mostrar los favicons en tu página web:
<link rel="icon" type="image/png" href="https://cdn.tusitioweb.com/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://cdn.tusitioweb.com/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.tusitioweb.com/favicon-96x96.png" sizes="96x96">
Íconos táctiles de Apple Touch
Apple iOS tiene una función llamada “Agregar a la pantalla de inicio” que básicamente hace que tu sitio web móvil parezca una aplicación (oculta la barra de direcciones de los navegadores, etc).
Pues bien, el ícono táctil de Apple ofrece un ícono de aplicación específico del dispositivo para esta aplicación improvisada.
Aquí tienes un desglose actualizado de los tamaños requeridos para Apple Touch: 152 × 152 para el ícono táctil del iPad (Cambio para iOS 7: desde 144 × 144), 167 × 167 para el icono táctil de iPad Retina (cambio para iOS 10: desde 152 × 152, no en acción. IOS 10 usará 152 × 152) y 180 × 180 para iPhone Retina.
La sintaxis en HTML viene a ser la siguiente:
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png">
Nota: cualquier elemento “retina” y anterior cambiará el tamaño del icono predeterminado de 120 px. ya que no se especifica
sizesen ningún atributo.
Para obtener más información sobre los íconos táctiles, puedes consultar la documentación oficial de Apple en donde también se explica cómo eliminar la barra de estado, agregar un título de aplicación personalizado e incluso una pantalla de inicio para tu aplicación web.
¿Realmente necesitas declarar las etiquetas HTML en el
head
?
No.
Siempre que los íconos táctiles se carguen en la carpeta raíz del sitio web, Apple va a poder buscarlos, sin embargo en otros sistemas operativos también se usan estos íconos e incluso en Android.
Por ello, es mejor incluirlos en la cabecera de tu sitio web.
Íconos en Windows
Windows 10 (Metro UI) usa un formato de mosaico para mostrar los íconos de las aplicaciones (con una opción alternativa de “Agregar sitio a las aplicaciones”) que es un poco más compleja en comparación con otros métodos.
Vamos a ver los tamaños (en píxeles) que se utilizan: 70×70, 270 x 270, 310 x 310 y 310 x 150.
Nota: el 270x se escalará a 150x en pantallas de baja densidad.
¿Cómo se instalan estos íconos específicos para Windows?
Se debe cargar el archivo
browserconfig.xml
con el siguiente código en el directorio raíz de tu sitio web.
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>
<square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
<square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
<wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>
Más tamaños de Favicons
¿Existen más tamaños para los favicons? Por supuesto que sí. Por ejemplo, el tamaño de 128×128 es para el icono de Chrome Webstore, 196×196 para el icono de Android Chrome y 228×228 es utilizado por el icono de Opera Coast.
Consejos de diseño de un favicon
La clave del diseño de un favicon es la simplicidad, al tener una pequeña cantidad de espacio para trabajar en su creación los detalles no serán visibles, por lo que es importante usar formas limpias.
A veces se puede utilizar letras, pero por regla general lo mejor es intentar evitarlas si tu logotipo no tiene una versión “corta” como por ejemplo, el logotipo de LinkedIn.
Algunos de los logotipos se pueden usar para crear favicons tal como están y algunos deben crear una versión simplificada. Claro esta, los logotipos de los favicons deben mantener los colores de marca.
Compartir en redes sociales
Se pueden especificar imágenes personalizadas para aquellos que comparten tu páginas web en las redes sociales (si no lo haces, se compartirá una imagen random que aparezca en el contenido de la página web).
Si bien, esas imágenes teoricamente pueden tener casi cualquier tamaño, un tamaño recomendado suele ser el de 1200×630 o más grande (y a poder ser de menos de 1 MB de peso y con una proporción de escala 1.91: 1).
Cada sitio de redes sociales tiene su propia recomendación de tamaño para las imágenes. Puedes informarte de cada tamaño más concreto en esta publicación de CSS Tricks en la que explica cada tamaño y sintaxis de HTML concreta para cada red social.
Conclusión sobre los favicons
Las personas usan los sitios web de diferentes formas hoy en día, incluso algunos usuarios todavía marcan las páginas web como favoritas, incluso agregan los sitios web a la pantalla de inicio para usarlo a modo de aplicación.
La gran mayoría de usuarios, accede cada vez más a las páginas web directamente desde las redes sociales e incluso aún hay gente que lee sus sitos favoritos desde compartidores de noticias como Pocket o sitios de RSS.
Es importante mantener actualizado el como se visualiza el icono en cada sistema operativo específico; si no lo haces, los iconos de tu sitio web puede aparecer borroso o directamente no aparecer.
Y eso, va a terminar devolviéndote malos resultados. Un sitio web sin ícono, es un sitio web sin alma.