Los favicons
Historia y evolución
Los favicons nacieron en 1999 con Internet Explorer 5, que introdujo el soporte para archivos ICO de 16×16 píxeles asociados a los marcadores. Inicialmente una característica propietaria de Microsoft, el W3C pronto estandarizó la etiqueta <link rel="icon"> y el resto de navegadores adoptaron el formato.
Con la llegada de los dispositivos móviles y las pantallas de alta densidad, las necesidades crecieron: Apple introdujo el Apple Touch Icon (2007) para iOS, Android requirió iconos de 192×192 px, y los navegadores de escritorio pidieron versiones de 32×32 y 48×48 px.
En 2015, el formato manifest.json estandarizó la gestión de iconos para aplicaciones web progresivas (PWA). Hoy un favicon moderno es un conjunto de iconos en múltiples tamaños y formatos, desde 16×16 px para pestañas hasta 512×512 px para PWA.
Buenas prácticas
Para implementar favicons correctamente hay que tener en cuenta los estándares actuales y las particularidades de cada plataforma:
Genera múltiples tamaños. Prepara al menos: 16×16 y 32×32 px para navegadores de escritorio, 180×180 px para Apple Touch Icon, 192×192 y 512×512 px para Android y PWA.
Diseña para dimensiones reducidas. A 16×16 px los detalles finos desaparecen. Simplifica: usa formas icónicas claras, colores contrastados y evita texto pequeño.
Implementa correctamente las etiquetas HTML. Coloca favicon.ico en la raíz del dominio y declara las otras versiones con etiquetas <link> en el <head>.
Versiona los archivos al actualizar. Los navegadores cachean los favicons de forma agresiva. Añade un parámetro de versión (ej: favicon.ico?v=2) para forzar la recarga.
Casos de uso
Los favicons tienen un papel práctico inmediato en la gestión de múltiples pestañas. Cuando un usuario tiene decenas de pestañas abiertas, reconoce visualmente cada servicio gracias a su icono. Aplicaciones de productividad como Gmail, Notion o Figma cuidan mucho su favicon porque sus usuarios trabajan con muchas pestañas simultáneas.
En entornos de desarrollo profesional, es habitual usar favicons diferenciados por entorno (producción, staging, local), con colores o iconos ligeramente distintos, para evitar errores costosos. Para tiendas en línea y sitios institucionales, un favicon coherente con la identidad visual corporativa refuerza la confianza de los visitantes.
Curiosidades
- El primer favicon documentado fue la estrella de 5 puntas de MSN en 1999, cuando Internet Explorer 5 introdujo el soporte para iconos en los marcadores.
- Twitter cambia dinámicamente su favicon para mostrar el número de notificaciones pendientes, una técnica popularizada a principios de la década de 2010.
- El formato ICO puede contener múltiples resoluciones en un solo archivo. La mayoría de herramientas generan automáticamente variantes de 16, 32 y 48 píxeles en un único favicon.ico.
- Los favicons SVG, escalables vectorialmente, están soportados por los navegadores modernos desde 2020 y permiten adaptarse al modo oscuro del sistema operativo.