Diseño · Actualizado · 2026-09-02
Diseño de iconos de app: qué los hace reconocibles al instante
De dónde sale "reconocible de un vistazo": un símbolo, el espacio en blanco como estructura, compartir el trabajo con el sistema, la contención en el color — Apple y Google cuentan lo mismo.
Los buenos iconos comparten una cualidad: no hace falta buscarlos, saltan a la vista. Apple y Google escriben cada una un libro entero de directrices de iconos, pero desmontadas y puestas una junto a la otra dicen lo mismo: en una pantalla donde cien iconos compiten por la atención, ¿por qué reconocerían el tuyo de un vistazo? Este artículo desmonta esa pregunta.
El poder de un solo símbolo
La reconocibilidad empieza en "menos". Los iconos que se sostienen casi siempre tienen un único protagonista: una huella, un anillo, una letra. En cuanto los símbolos se multiplican, los iconos de la pantalla se empujan entre sí y cada detalle añadido diluye el recuerdo. Primero comprime la esencia del producto en un solo elemento; después dibújalo con las menos formas posibles.
Formas grandes, trazos gruesos. Los iconos se ven más a menudo a unos cuarenta píxeles, y a ese tamaño las líneas finas desaparecen, los ángulos agudos se correan, los contornos de línea se rompen en ruido; las formas rellenas de color sólido conservan su silueta. Un orden práctico de comprobación: mira primero si se sostiene a 48px, y luego escala y añade detalle. Dibuja en vector siempre que puedas (SVG/PDF, texto convertido a contornos): por mucho que lo escales, la silueta no te traicionará.
El espacio en blanco es una estructura
La forma final de un icono no la decide el diseñador: el sistema la enmascarará en un círculo, un cuadrado redondeado, incluso la forma propia de cada fabricante. Por eso el espacio en blanco no es una preferencia estética, es una necesidad estructural. Las cifras de Google dan la referencia más concreta: el lienzo es de 108dp, el anillo exterior de 18dp ya está reservado para máscaras y paralaje, y el sujeto debe caber en la zona segura central de 66dp. Hechas las cuentas, el sujeto ocupa apenas el 60% central del lienzo. Apple lo formula de otro modo pero pide lo mismo: el sujeto centrado, fuera del alcance de cualquier máscara.
Esto explica también por qué los logos geométricos no deberían esforzarse por llenar el lienzo. Cuando la forma es en sí el activo de marca, centrarla en la cuadrícula keyline y entregar los alrededores al color de fondo le da más identidad, no menos; la ilustración es el extremo opuesto, hecha de serie para la sangría completa.
El sistema es el segundo diseñador
Un icono moderno es una obra a medias. Después de entregarla, el sistema sigue dibujando: las esquinas las recorta el sistema, las sombras las añade el sistema, y el Liquid Glass de iOS superpone reflejos especulares y refracción. El trabajo del diseñador es preparar una buena superficie de trabajo para ese segundo diseñador: material a sangre completa, bordes limpios, una capa de primer plano con silueta nítida y sin difuminar, para que los brillos y las sombras del sistema tengan dónde caer.
La profundidad sigue la misma lógica: no la simules con efectos, resérvala con estructura. Dentro de la capa de primer plano, separa el frente del fondo con diferencias de opacidad (el icono de Photos de Apple es el caso de manual) o deja que formas sólidas se superpongan y la profundidad aparece sola. Los brillos y sombras que pintas tú son estáticos, y siempre pelearán con la luz dinámica del sistema.
Contención y liberación del color
El fondo es el espacio de respiración del icono; basta un color sólido o un degradado sencillo. Su trabajo es realzar al sujeto, no quitarle protagonismo. El negro puro es la única excepción a vigilar: se disuelve en los fondos oscuros, así que aclara el negro un paso.
El color se pone realmente a prueba en las variantes de apariencia. iOS ofrece formas de pantalla oscura, clara y teñida, y entre variantes solo debería cambiar el clima de color, nunca los elementos. Si el usuario deja de reconocerte en el instante en que cambia la apariencia, todo el diseño anterior se perdió. Los iconos temáticos de Android llevan esa prueba al límite: el sistema retira tus colores y conserva solo una capa monocroma que tiñe con el fondo de pantalla, así que la silueta tiene que sostenerse sola, sin ningún color.
La retirada del texto
El texto es el elemento que más se piensa de más en un icono: ilegible en tamaños pequeños, excluido de la accesibilidad y la localización, y el nombre de la app ya está al lado del icono. Si la marca necesita de verdad un monograma de una letra, dibújalo como forma, no lo compongas como tipografía. El mismo razonamiento cubre las fotografías y las capturas de la interfaz — sus detalles finos fracasan a tamaños reales — y las siluetas de hardware, que Apple prohíbe explícitamente.
De vuelta a ese único vistazo
Del símbolo al color, cada detalle sirve a un solo instante: la mirada con la que el usuario recorre la pantalla de inicio. Un lienzo a sangre completa, un sujeto centrado, bordes limpios, color contenido, una silueta que se sostiene sola — haz esto, y el sistema pintará encantado la otra mitad.
Referencias
- Apple Human Interface Guidelines — App icons
- Google Play icon design specifications
- Adaptive icons — Android Developers
Verificado el 2026-09-02