Tamaños esenciales de favicon: Guía rápida de decisiones para 2025

Internet está lleno de recomendaciones de tamaños de favicon que van desde 4 hasta más de 20 dimensiones diferentes. La mayoría de los sitios web no las necesitan todas. Esta guía elimina el ruido para mostrarte exactamente qué tamaños de favicon importan para tu proyecto específico, ahorrándote tiempo y reduciendo la complejidad.

Los únicos 4 tamaños de favicon que realmente necesitas

Después de analizar miles de sitios web y patrones de uso de dispositivos, estos son los tamaños esenciales de favicon que cubren el 99% de los casos de uso:

1. favicon.ico (Contenedor multi-tamaño)

Tamaño: Contiene 16x16 y 32x32 píxeles Por qué es esencial: Soporte universal de navegadores, detección automática Formato de archivo: ICO Uso: Pestañas del navegador, marcadores, historial del navegador

2. 180x180 píxeles (Apple Touch Icon)

Tamaño: 180x180 píxeles Por qué es esencial: Pantalla de inicio de iOS, marcadores de Safari Formato de archivo: PNG Uso: "Añadir a pantalla de inicio" de iPhone/iPad

3. 192x192 píxeles (Android Chrome)

Tamaño: 192x192 píxeles Por qué es esencial: Pantalla de inicio de Android, accesos directos de Chrome Formato de archivo: PNG Uso: Dispositivos Android, requisito mínimo de PWA

4. 512x512 píxeles (PWA y preparación para el futuro)

Tamaño: 512x512 píxeles Por qué es esencial: Progressive Web Apps, pantallas de alta resolución Formato de archivo: PNG Uso: Pantallas de splash de PWA, tiendas de aplicaciones

Código de implementación rápida

Aquí está el HTML mínimo que necesitas en tu etiqueta <head>:

<!-- Configuración esencial de favicon - cubre el 99% de dispositivos -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

Eso es todo. Estos cuatro archivos mostrarán correctamente tu favicon en todos los dispositivos y navegadores modernos.

Cuándo podrías necesitar tamaños adicionales

¿Estás construyendo una Progressive Web App?

Añade estos a tu manifiesto web:

144x144 - Mosaicos de Windows
384x384 - Tamaño intermedio de PWA

¿Soporte para sistemas heredados?

Considera añadir:

16x16 PNG - Navegadores muy antiguos
32x32 PNG - Pantallas de alta DPI antiguas
48x48 - Accesos directos de escritorio Windows

¿Quieres cobertura perfecta?

El conjunto completo incluye:

16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 144x144, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512

Pero recuerda: cada tamaño adicional añade complejidad con rendimientos decrecientes.

Diagrama de flujo de decisión de tamaños

¿Tu sitio es una PWA?
├─ Sí → Usa los 4 tamaños esenciales + tamaños del manifiesto
└─ No → Continúa
   │
   ¿Es un sitio web/blog simple?
   ├─ Sí → Usa solo favicon.ico
   └─ No → Continúa
      │
      ¿El tráfico móvil es > 50%?
      ├─ Sí → Usa los 4 tamaños esenciales
      └─ No → Usa favicon.ico + 192x192

Comparación de tamaños del mundo real

Esto es lo que realmente usan los principales sitios web:

Sitio web	Número de tamaños	Tamaños reales usados
Google	3	favicon.ico, 192x192, 512x512
Facebook	4	favicon.ico, 180x180, 192x192, 512x512
Amazon	2	favicon.ico, 192x192
Netflix	3	favicon.ico, 192x192, 512x512
GitHub	5	favicon.ico, 180x180, 192x192, 512x512, SVG

¿Notas el patrón? Incluso los gigantes tecnológicos lo mantienen simple.

Directrices de tamaño de archivo

Mantén tus favicons ligeros para mejor rendimiento:

Tamaño de favicon	Tamaño objetivo	Máximo aceptable
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

Errores comunes de tamaño a evitar

Error 1: Usar solo tamaños grandes

Problema: Un icono de 512x512 reducido a 16x16 se ve borroso Solución: Siempre incluye favicon.ico con tamaños pequeños incorporados

Error 2: Olvidar tamaños móviles

Problema: Aparece un icono genérico cuando los usuarios guardan en pantalla de inicio Solución: Incluye 180x180 (iOS) y 192x192 (Android)

Error 3: Sobreoptimizar tamaños de archivo

Problema: Los iconos muy comprimidos se ven pixelados Solución: Equilibra calidad y tamaño de archivo; los favicons se cachean de todos modos

Error 4: Usar dimensiones incorrectas

Problema: 200x200 o 256x256 en lugar de tamaños estándar Solución: Apégate a las dimensiones estándar de plataforma

Lista de verificación rápida de pruebas

Prueba tu implementación de favicon:

Pestaña del navegador de escritorio - ¿Aparece favicon.ico?
Navegador móvil - ¿El icono es visible en Chrome/Safari móvil?
Añadir a pantalla de inicio - Prueba tanto en iOS como en Android
Prueba de marcadores - Añade un marcador y verifica el icono
Vista previa al compartir - Algunas plataformas usan tamaños más grandes para compartir

Formato vs tamaño: ¿Qué importa más?

El tamaño determina dónde aparece tu favicon El formato determina compatibilidad y calidad

Orden de prioridad:

Primero asegúrate de tener los tamaños correctos
Usa ICO para favicon.ico
Usa PNG para todos los demás tamaños
Considera SVG solo después de que lo básico funcione

La configuración de favicon en 5 minutos

Comienza con una imagen maestra de 512x512
Genera los 4 tamaños esenciales usando cualquier generador de favicon
Añade el código HTML al head de tu sitio
Prueba en un navegador de escritorio y uno móvil
Publícalo - no lo pienses demasiado

Consejos específicos por tamaño

Para 16x16 y 32x32 (favicon.ico)

Usa formas simples sin detalles finos
Prueba la visibilidad al tamaño real
Evita texto a menos que sea 1-2 caracteres

Para 180x180 (iOS)

Diseña teniendo en cuenta las esquinas redondeadas (iOS las aplica)
Usa fondo sólido (la transparencia se convierte en blanco)
Asegura buen contraste

Para 192x192 y 512x512 (Android/PWA)

Soporta transparencia para iconos adaptativos
Prueba en varios fondos de launchers Android
Mantén los elementos importantes centrados

Impacto en el rendimiento por tamaño

Cargar múltiples tamaños de favicon tiene un impacto mínimo:

4 tamaños esenciales: ~25KB total, 4 peticiones
10 tamaños completos: ~60KB total, 10 peticiones
20+ tamaños: ~120KB total, a menudo innecesario

Los favicons se cachean agresivamente, por lo que la carga inicial es la única preocupación.

Recomendaciones finales

Para el 90% de los sitios web: Usa los 4 tamaños esenciales. Listo.

Para PWAs: Añade 144x144 y 384x384 a los 4 esenciales.

Para máxima compatibilidad: Usa una herramienta generadora para crear todos los tamaños, pero entiende que estás optimizando para casos extremos.

Recuerda: La cobertura perfecta de favicon en cada posible dispositivo y versión de navegador es imposible. Enfócate en los tamaños que importan para tus usuarios reales, impleméntalos correctamente, y pasa a aspectos más impactantes de tu sitio web.

La mejor implementación de favicon es una que funcione de manera confiable para tus usuarios sin complicar excesivamente tu código. Comienza con lo esencial, añade más solo cuando tengas una necesidad específica.

¿Necesitas probar tu favicon en diferentes tamaños? Prueba Favicon.im para previsualizar instantáneamente cómo aparece el favicon de cualquier sitio web en varias dimensiones.