¿Qué es un favicon?

Un favicon es la imagen pequeña que identifica a un sitio web dentro del navegador. Aparece en la pestaña abierta, junto al título de la página, y también en los marcadores, en el historial y en las sugerencias que el navegador muestra al escribir una dirección. El término viene del inglés favorite icon (ícono de favoritos), porque fue en la lista de favoritos donde empezó a utilizarse a mediados de los años noventa, con los primeros navegadores gráficos. Hoy el favicon es mucho más que un adorno: es la carita con la que una web se presenta en un espacio donde compiten decenas de pestañas y opciones. Aunque mide apenas unos pocos píxeles, el favicon transmite información muy útil: indica, sin necesidad de leer el título completo, que una pestaña pertenece a un sitio determinado. Es la primera impresión visual que muchas personas tienen de una marca en el día a día y, por eso, hasta un sistema como Kardex Tauro tiene el suyo, para que quien trabaja con sus inventarios encuentre de un vistazo la pestaña correcta entre muchas abiertas.

¿Para qué sirve un favicon?

El favicon cumple varias funciones, todas relacionadas con identificar, diferenciar y dar confianza:

Identificar el sitio de un vistazo. Con muchas pestañas abiertas, el ícono permite encontrar la página correcta sin leer cada título.
Reforzar la marca. Repite el logotipo o sus colores en cada pestaña, en el historial y en los marcadores, lo que suma recordación con el tiempo.
Transmitir profesionalismo. Un sitio sin favicon se percibe incompleto o descuidado frente a otro que sí lo tiene.
Mejorar la experiencia del usuario. Facilita orientarse y volver a una página, sobre todo cuando hay muchas ventanas o pestañas abiertas.
Diferenciar el sitio de la competencia. Ayuda a que una página se distinga de otras similares guardadas en favoritos.
Personalizar accesos. En las aplicaciones instaladas desde el navegador y en los accesos directos del escritorio se utiliza una variante del favicon como ícono.

En resumen, el favicon cumple la misma función que un letrero en la puerta de un negocio, pero en miniatura: permite reconocer, recordar y distinguir.

¿Dónde se ve un favicon?

El favicon aparece en varios lugares del navegador y del sistema operativo:

En la pestaña del navegador. Es el lugar principal: el ícono se muestra a la izquierda del título de la página.
En la barra de marcadores o favoritos. Cada sitio guardado se identifica por su ícono, lo que permite encontrarlo rápido entre decenas de favoritos.
En el historial de navegación. Ayuda a reconocer, días después, las páginas que se visitaron.
En las sugerencias de autocompletado. Al escribir una dirección, el navegador muestra el ícono junto a cada sugerencia.
En las aplicaciones instaladas desde la web. Cuando un sitio se instala como aplicación, su ícono se usa en el escritorio o en el menú de aplicaciones del dispositivo.
En agregadores y plataformas de contenido. Muchos lectores de noticias utilizan el favicon para representar la fuente de cada artículo.

Cada uno de estos lugares es un punto de contacto con el usuario. Por eso el favicon debe verse bien a cualquier tamaño y sobre cualquier color de fondo.

¿Qué tamaño y formato debe tener un favicon?

Un favicon se diseña para verse bien en dimensiones muy reducidas, porque debe leerse en espacios de pocos píxeles. Los tamaños clásicos y su uso típico son los siguientes:

Tamaño	Dónde se usa
16 × 16 píxeles	Pestaña del navegador; el favicon clásico
32 × 32 píxeles	Pestañas en pantallas de alta densidad y accesos directos
48 × 48 píxeles	Marcadores, historial y algunos sistemas operativos
192 × 192 píxeles	Ícono de aplicaciones web instalables (PWA)

Sobre el formato, el tradicional es el ICO, un archivo que puede guardar varias resoluciones a la vez y que los navegadores reconocen desde los primeros años de la web. Hoy también se usan mucho el PNG, que admite transparencia y se ve nítido en cualquier pantalla, y el SVG, que es vectorial y escala sin perder calidad. Una práctica recomendada es publicar al menos una versión de 32×32 o de 64×64 píxeles en PNG, o un archivo ICO con varios tamaños dentro, para cubrir la mayoría de los casos.

¿Cómo crear un favicon?

Crear un favicon no exige ser diseñador gráfico. Se puede partir del logotipo de la marca o de un símbolo simple y seguir estos pasos:

Simplificar el diseño. A 16 × 16 píxeles no caben los detalles finos; conviene una sola forma clara, con colores de alto contraste.
Probar en pequeño. Lo que se ve bien en grande puede volverse ilegible en miniatura; el diseño debe revisarse a su tamaño real.
Usar herramientas de diseño. Los programas de diseño vectorial o los editores de imagen permiten exportar el ícono en varios tamaños y formatos.
Recurrir a convertidores en línea. Existen servicios gratuitos que convierten una imagen PNG o JPG en un archivo ICO con varias resoluciones incluidas.
Mantener la coherencia de marca. Conviene usar los mismos colores y formas del sitio para que el ícono se asocie de inmediato con la marca.
Nombrar el archivo correctamente. La convención clásica es llamarlo favicon.ico, para que el navegador lo encuentre sin configuración adicional.

El resultado debe reconocerse en medio segundo, porque eso es lo que tarda un usuario en mirar una pestaña.

¿Cómo poner un favicon en una página web?

Existen dos formas principales de colocar un favicon en un sitio web. La primera es subir el archivo a la raíz del sitio con el nombre favicon.ico. Cuando el navegador abre una página, solicita automáticamente /favicon.ico y, si el archivo existe, lo muestra sin necesidad de modificar el código. Es el método más simple y funciona en casi cualquier alojamiento. La segunda es enlazarlo desde el HTML, lo que da control total sobre la ruta y el formato. Para ello se agrega una línea dentro de la cabecera de la página, entre las etiquetas de encabezado, similar a esta: <link rel='icon' href='favicon.ico'> Si el archivo está en otra carpeta o tiene otro nombre, se indica la ruta completa en el atributo href. Si el archivo es un PNG, la línea puede verse así: <link rel='icon' type='image/png' href='favicon.png'> En los sitios construidos con gestores de contenido, como WordPress, normalmente basta con subir el archivo desde el panel de administración; el sistema se encarga de generar la etiqueta correspondiente. En un sitio estático, basta con subir el archivo por FTP y añadir, si se desea, la línea de enlace en cada página.

Errores comunes con el favicon

Aunque el concepto es sencillo, es frecuente encontrar problemas al implementarlo. Los más habituales son:

El ícono no aparece por la caché del navegador. Es el error número uno: el navegador guarda el favicon antiguo y sigue mostrándolo aunque el archivo haya cambiado. Se resuelve borrando la caché, probando en una ventana de incógnito o forzando la recarga de la página.
Ruta o nombre incorrectos. Si el archivo no está en la raíz o el nombre no coincide con el del enlace, el navegador no lo encuentra y muestra el ícono genérico.
Formato no soportado. Algunos navegadores antiguos solo aceptan ICO; si se usa únicamente PNG o SVG, el ícono puede no verse en todos los equipos.
Tamaño mal calculado. Una imagen muy grande se reduce mal y termina viéndose borrosa o ilegible en la pestaña.
Esperar una actualización inmediata. Además de la caché local, algunas redes de distribución de contenido tardan en propagar el cambio del ícono.
Confundir el favicon con el logotipo completo. El logotipo completo casi nunca funciona en 16 × 16 píxeles; hace falta una versión simplificada.

Para comprobar que todo quedó bien, basta con abrir el sitio en una ventana de incógnito y mirar la pestaña: si el ícono aparece nítido junto al título, el favicon está funcionando. En definitiva, el favicon es un detalle pequeño con un impacto grande en la imagen de cualquier sitio. Identifica la web, refuerza la marca y mejora la experiencia de quien navega. Y como ocurre con los buenos detalles, cuando está bien hecho pasa desapercibido: la pestaña, simplemente, se reconoce al instante.

Labels:

#favicon #icono #web