Con tantos dispositivos, navegadores y plataformas, los tamaños de los favicon pueden ser confusos. ¿Necesitas 6 archivos diferentes? ¿O puedes arreglártelas con solo uno? Esta guía aclara todas tus dudas.
Tabla completa de tamaños de Favicon
| Tamaño | Archivo | Usado por | ¿Requerido? |
|---|---|---|---|
| 16×16 | favicon-16x16.png | Pestañas del navegador (pantallas estándar) | Recomendado |
| 32×32 | favicon-32x32.png | Pestañas del navegador (Retina/HiDPI), barra de tareas | Sí |
| 48×48 | favicon.ico (multi-tamaño) | Acceso directo de escritorio de Windows | Opcional |
| 180×180 | apple-touch-icon.png | Pantalla de inicio de iOS (iPhone/iPad) | Sí |
| 192×192 | android-chrome-192x192.png | Pantalla de inicio de Android, icono PWA | Recomendado |
| 512×512 | android-chrome-512x512.png | Pantalla de inicio de PWA, tiendas de aplicaciones | Recomendado |
La configuración mínima (3 archivos)
Si quieres mantener las cosas simples, estos 3 archivos cubren el 99% de los escenarios del mundo real:
- favicon.ico (32×32) — El respaldo universal. Todos los navegadores lo soportan.
- apple-touch-icon.png (180×180) — Para dispositivos iOS y algunos lanzadores de Android.
- site.webmanifest — Apunta a tus iconos de 192×192 y 512×512 para el soporte de PWA.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Consejo: Los navegadores modernos prefieren PNG sobre ICO. Si incluyes un PNG de 32×32 junto con el ICO, los navegadores modernos usarán el PNG para una renderización más nítida.
La configuración completa (6 archivos)
Para la mejor experiencia en todas las plataformas:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">¿Por qué no usar solo una imagen grande?
Un error común es proporcionar solo un icono de 512×512 y esperar que los navegadores lo escalen. Aquí te explicamos por qué esto es problemático:
- Rendimiento — Un PNG de 512×512 puede pesar más de 50KB. Las pestañas del navegador solo necesitan 16×16 (menos de 1KB). Esto es 50 veces más datos de lo necesario.
- Calidad — Reducir un logo complejo de 512px a 16px a menudo produce una imagen borrosa. Los iconos pequeños optimizados manualmente se ven mucho mejor.
- Compatibilidad con ICO — Los navegadores antiguos y los accesos directos de Windows aún esperan el formato ICO.
Genera todos los tamaños a partir de una sola imagen
La buena noticia: no necesitas crear cada tamaño manualmente. Utiliza la herramienta Image to Favicon en Mzu favicondl para subir una imagen de alta resolución y generar automáticamente todos los tamaños listados arriba, empaquetados en un archivo ZIP listo para usar.
Hoja de referencia rápida
| Plataforma | Tamaño Necesario | Formato |
|---|---|---|
| Pestaña de Chrome/Firefox/Edge | 32×32 | PNG o ICO |
| Pestaña de Safari | 32×32 | PNG o ICO |
| Resultados de búsqueda de Google | ≥48×48 (múltiplos de 48) | Cualquiera |
| Pantalla de inicio de iPhone/iPad | 180×180 | PNG |
| Pantalla de inicio de Android | 192×192 | PNG |
| Barra de tareas de Windows | 32×32 | ICO |
| Dock de macOS (PWA) | 512×512 | PNG |