Sobre los Favicons
Los favicons son pequeños iconos que aparecen en la pestaña del navegador, marcadores, historial y en la pantalla de inicio de dispositivos móviles. Un sitio web moderno necesita múltiples tamaños de favicon para funcionar correctamente en diferentes plataformas y contextos.
Tamaños Necesarios
16×16: Icono estándar en la pestaña del navegador
32×32: Pestaña del navegador en pantallas Retina
180×180: Apple Touch Icon para iOS
192×192: Icono para Android y PWA
512×512: Pantalla de splash para PWA
Cómo Implementar
Coloca todos los archivos generados en la raíz de tu sitio web. Agrega las etiquetas HTML en el head de tu documento. Para PWAs, también crea el archivo site.webmanifest con las referencias a los iconos de Android.
Consejos de Diseño
Usa una imagen cuadrada simple y reconocible. Evita detalles pequeños que no serán visibles en 16×16 píxeles. Los colores sólidos y las formas simples funcionan mejor. Prueba tu favicon en diferentes fondos (claro y oscuro) para garantizar buena visibilidad.