Elige un contexto de interfaz abajo para ver el tamaño de icono recomendado, el área táctil mínima y la guía de plataforma detrás de ella.
Icono (a escala)
Área táctil (a escala)
Estos valores siguen las guías habituales de Apple HIG, Material Design y WCAG. Cumplir un tamaño recomendado no asegura por sí solo el cumplimiento completo de la accesibilidad digital.
Por qué se regula el tamaño de iconos y áreas táctiles
Un icono demasiado pequeño es difícil de leer de un vistazo, y un área táctil demasiado pequeña es difícil de pulsar con precisión, sobre todo para alguien con motricidad fina reducida, dedos más grandes, o un dispositivo usado con una sola mano en movimiento. Las Human Interface Guidelines de Apple, el Material Design de Google y las Pautas de Accesibilidad para el Contenido Web (WCAG) fijan cada una tamaños mínimos por esta razón exacta: por debajo de cierto tamaño, la tasa de error en pantallas táctiles sube con fuerza, y las etiquetas de los iconos dejan de leerse a una distancia normal. No son cifras arbitrarias, vienen de estudios medidos de precisión táctil y legibilidad usados para fijar los valores por defecto de cada plataforma.
Tabla completa de referencia: tamaño de icono por contexto
| Contexto | Tamaño de icono | Área táctil | Plataforma |
|---|---|---|---|
| Icono de barra de navegación móvil | 24 x 24px | 44 x 44pt (iOS) / 48 x 48dp (Android) | iOS / Android |
| Icono de barra de herramientas de escritorio | 16 a 24px (20px habitual) | Mínimo 32 x 32px | Escritorio (Windows, macOS, web) |
| Favicon | 16, 32 y 48px (multi-resolución) | No aplicable | Navegador |
| Botón de acción flotante (FAB) | Icono 24 x 24dp | Botón 56 x 56dp | Android / Material Design |
| Icono en una lista o menú | 24 x 24px | Altura de fila 48 x 48dp | iOS / Android / web |
| Icono de sistema iOS | 1024 x 1024px (App Store) / 180 x 180px (pantalla de inicio, 60pt a 3x) | Toda el área del icono | iOS |
| Icono de sistema Android / Material | 512 x 512px (Play Store) / 108 x 108dp icono adaptativo (zona segura de 72dp) | Toda el área del icono | Android |
| Área táctil mínima general | No aplicable | 44 x 44px CSS (WCAG 2.2 AA) / 24 x 24px (AAA) / 48 x 48dp (Material Design) | Multiplataforma, accesibilidad web |
Marco normativo español de accesibilidad digital
En España, el Real Decreto 1112/2018 sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público transpone la directiva europea 2016/2102 y exige el cumplimiento de las normas UNE-EN 301549, basadas directamente en las WCAG. Este marco se está ampliando al sector privado a través de la transposición del Real Decreto que traslada la Directiva europea de accesibilidad de productos y servicios, con obligaciones progresivas para bancos, comercio electrónico y transporte a partir de 2025. El tamaño del área táctil corresponde al criterio de éxito WCAG 2.5.8, que fija 24 x 24 píxeles CSS como mínimo en el nivel AA, con 44 x 44 píxeles CSS recomendados como mejor práctica.
Límites de esta referencia
Cumplir un tamaño de icono o área táctil recomendado es solo una parte de la accesibilidad digital, no toda ella. El contraste de color, la navegación por teclado, el etiquetado para lectores de pantalla y el orden de foco son criterios distintos que un icono bien dimensionado no cubre por sí mismo. Usa esta herramienta como una referencia rápida de dimensionamiento para diseño y desarrollo, no como prueba de cumplimiento de accesibilidad. Para el espaciado y la estructura de rejilla alrededor de estos iconos, consulta el Constructor de Sistema de Rejilla.