Favicon
Contenido
¿Qué es un Favicon?
Un favicon es un pequeño símbolo que se muestra junto al título de la página en las pestañas del navegador y que ayuda a reconocer fácilmente un sitio web. Por lo general, suele ser una versión simplificada del logotipo de la empresa o de su marca diseñado de forma figurativa.
Es de gran utilidad sobre todo cuando se abren muchas pestañas al mismo tiempo, de manera que incluso, este pequeño icono cuadrado es, a veces, la única ayuda para orientarse entre los sitios web abiertos en ese momento.
Favicon en las desktops
Los primeros favicons nacieron hace unos 20 años con el lanzamiento de Internet Explorer 5, donde se disponía de hasta 16x16 píxeles para mostrar el favicon de un sitio. Posteriormente, esta resolución aumentó a 32x32 y 48x48 píxeles, aunque la imagen de 16 píxeles en formato .ico sigue considerándose un estándar común para el favicon en la actualidad.
Con el aumento del número de navegadores y dispositivos finales, las exigencias para la creación del favicon fueron cada vez mayores, por lo que el formato .ico pronto se complementó con los formatos .png, .gif, .jpg y, finalmente, .svg, siendo los dos primeros compatibles con los navegadores principales.
Por regla general, el favicon se almacena en el directorio raíz de un sitio, por lo que los navegadores lo buscan automáticamente allí. De no encontrar el archivo esperado en esa ruta, se produce un error 404 en el servidor web, lo que no solo ralentiza el tiempo de carga de un sitio, sino que también tiene un efecto negativo en su usabilidad.
Para asegurarse de los navegadores encuentra el favicon sin problemas, se debe especificar su ruta en la cabecera HTML utilizando estas meta etiquetas:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
En nuestro sitio web seobility.net/es, esta metaetiqueta tiene el siguiente aspecto:
<link href="https://www.seobility.net/dynamiccontent/www.seobility.net/favicon.gif" rel="shortcut icon" type="image/x-icon" >
Más recientemente, se ha añadido también el formato .svg, que, para desgracia de muchas diseñadoras y diseñadores web, ha sido hasta ahora un nicho de aplicación para los favicons, pues este formato puede escalarse bastante bien.
Además, hoy en día casi todos los navegadores modernos pueden mostrar gráficos .svg en su favicon, solo el navegador Safari lo solicita como formato único. No obstante, hasta ahora esta función sólo puede utilizarse en desktops.
Favicon Checker
Comprueba si tu favicon está enlazado correctamente
Favicon en dispositivos móviles
Tras el lanzamiento de su sistema operativo para teléfonos inteligentes iOS, Apple ha confiado cada vez más en las aplicaciones web convirtiéndolos, más bien, en una necesidad técnica incluso en las resoluciones más altas. De hecho, Google también ha incrementado su confianza con los favicons en su sistema Android.
En estos casos, el favicon se muestra como un icono o símbolo de aplicación al guardar alguna app web en la pantalla de inicio del smartphone. Considerando además que las resoluciones de las pantallas de smartphones suelen ser bastante altas, a menudo se requieren imágenes de hasta 512 píxeles de longitud de página.
Así pues, las resoluciones más potentes representan una gran ventaja, pues hace posible que se puedan desarrollar diversas opciones de diseño para implementar en el favicon.
En cuanto al almacenamiento de los favicons, como se mencionó antes, en las desktops se requiere la ruta del directorio raíz, pero la instalación de un favicon para dispositivos móviles y tabletas es aún más compleja y los requisitos de las plataformas respecto a un favicon son diferentes.
Por ejemplo, para que iOS encuentre estos iconos táctiles, es necesario especificar su ubicación de almacenamiento a través de una metaetiqueta en la cabecera del código HTML. De manera que antes se requerían diferentes tamaños, pero en la actualidad, Apple ha estandarizado que sea un archivo .png de 180 píxeles.
<link rel="apple--icono-tactil" sizes="180x180" href="/apple-icono-tactil.png">
Por otra parte, la integración en Android es algo más compleja, pues se utiliza una metaetiqueta que especifica la ubicación de un archivo .json y se enlaza con los íconos en formato .png. Incluso, este archivo conocido manifest.json es también la fuente de datos para el nombre de la aplicación y la combinación de colores de un sitio.
Este formato estándar sólo es compatible con Chrome para Android y Opera Mini. Se puede encontrar una descripción detallada de la estructura del archivo .json en https://developer.mozilla.org/es/docs/Web/Manifest.
<link rel="manifest" href="/manifest.json">
Iconos en el menú de inicio de Windows
Lamentablemente, Windows no utiliza el manifiesto en formato .json cuando coloca un sitio en su menú de inicio. Microsoft requiere de un archivo propietario .xml, que contiene información similar al manifest.json, pero se basa en un formato diferente.
A diferencia de otros sistemas, aquí la ubicación del archivo .xml no tiene que ser especificada como una metaetiqueta en el encabezado, ya que Windows siempre busca el archivo en el directorio raíz de un sitio.
Servicios web
Dado que no se ha establecido ningún estándar en el sector móvil, integrar los favicons correctamente se ha convertido en un reto para las y los desarrolladores web.
Afortunadamente, no es necesario crear cada archivo de forma individual en Photoshop o algún otro software similar, ya que existen sitios web como realfavicongenerator.net en los que se puede convertir cualquier imagen directamente en un favicon.
Dado que los parámetros como el color y el nombre de la aplicación también se introducen en el configurador, estos generadores pueden crear inmediatamente todos los archivos .xml y .json necesarios e incluso generar archivos .svg para Safari.
A partir de aquí, comprobar si se han cargado los archivos y si las metaetiquetas están configuradas correctamente es muy sencillo, solo hay que acceder al sitio web con un navegador.
Diseño gráfico
En el campo del diseño, destaca la dificultad a la hora de crear favicon que se muestre de forma atractiva tanto para una resolución alta como baja. Una buena recomendación para imágenes de baja resolución consiste en omitir los detalles sin perjudicar la capacidad de reconocimiento del favicon.
En conclusión
Los favicons han evolucionado enormemente en los últimos años y ahora son más que simples iconos en las pestañas del navegador. Especialmente, en lo que respecta a la usabilidad, se han hecho indispensables para el reconocimiento y la creación de marcas.
Además, para crear un icono atractivo, ya no es necesario recurrir a programas de tratamiento de imágenes y editores de texto. Gracias a los generadores gratuitos de favicons, se pueden crear todos los archivos necesarios de forma rápida y sencilla.
Sin embargo, los retos técnicos no deben distraer del objetivo principal: crear un símbolo gráfico que sea reconocible en todos los formatos, pero que a la vez, también sea único y representa a la marca.
Ampliar conocimientos
| Sobre las autoras y autores: |
 |