Diseño de iconos de apps móviles: claves del flujo de trabajo vectorial

El icono de tu app es el recurso visual que más trabaja en todo tu producto. Vende tu aplicación en una miniatura de 60x60 puntos en una pantalla de inicio abarrotada, sobrevive a una compresión brutal en los resultados de búsqueda de la tienda, y tiene aproximadamente 0,3 segundos para comunicar lo que haces antes de que el usuario pase de largo. Equivocarte cuesta descargas. Hacerlo bien empieza con vectores.

Por qué los archivos fuente vectoriales son innegociables

Si todavía diseñas iconos de app en Photoshop a 512x512, estás construyendo sobre arena. Entre iOS y Android, necesitas más de 20 archivos PNG distintos a partir de un solo diseño. El más pequeño es 16x16 (favicon), el más grande es 1024x1024 (App Store) — una diferencia de tamaño de 64x.

El arte raster se degrada al escalar. El arte vectorial no. Un archivo fuente vectorial — SVG desde VectoSolve o AI/EPS desde Illustrator — te da:

• Escalabilidad infinita sin pérdida de calidad a cualquier resolución
• Propagación en una edición: cambia un color una vez, reexporta todo
• Precisión matemática: las curvas permanecen suaves, las esquinas permanecen nítidas
• Preparación para el futuro: cuando las plataformas añadan nuevos tamaños requeridos, ya estás cubierto

"

El icono de tu app es la primera y más frecuente impresión que los usuarios tienen de tu producto. Merece una base vectorial.

Requisitos de iconos iOS vs Android

Las dos plataformas tienen filosofías de iconos completamente diferentes. Diseñar para ambas significa entender ambos sistemas en profundidad.

Cuadrícula de diseño y formas clave

Tanto Apple como Google publican cuadrículas de iconos. No son sugerencias — son la razón por la que los iconos bien diseñados se sienten "correctos" unos junto a otros en la pantalla de inicio.

Formas clave de Apple (dentro de 1024x1024): círculo de 860px de diámetro, cuadrado de 672px, rectángulo vertical de 592x840, rectángulo horizontal de 840x592. La forma principal de tu icono debe alinearse con una de ellas.

Cuadrícula Material de Google (canvas de 108x108 dp, área activa de 72x72 dp): círculo de 52dp, cuadrado de 44dp, rectángulo vertical de 36x52dp, rectángulo horizontal de 52x36dp.

El sistema de iconos adaptativos (Android)

El sistema de iconos adaptativos de Android toma desprevenidos a los diseñadores. En lugar de una sola imagen plana, proporcionas dos capas separadas:

Capa de primer plano (108x108 dp): Contiene tu logo o símbolo. La zona segura es solo el centro de 66x66 dp — todo lo que esté fuera puede ser recortado según la máscara del dispositivo.

Capa de fondo (108x108 dp): Un color sólido, degradado o patrón. Siempre completamente visible después del enmascaramiento y debe ser opaco.

108x108 dp canvas total
┌──────────────────────┐
│   ┌──────────────┐   │
│   │  Zona segura │   │
│   │   66x66 dp   │   │
│   └──────────────┘   │
└──────────────────────┘
       ↓ Máscara aplicada
    ◯ o ▢ o ⬡ etc.

El launcher elige la forma de la máscara. Tu icono debe verse correcto con cualquier máscara — círculo, cuadrado redondeado, squircle o formas OEM personalizadas. Los iconos adaptativos también soportan movimiento parallax: el primer plano se desplaza respecto al fondo al inclinar o mantener pulsado, así que asegúrate de tener suficiente sangrado para evitar exponer huecos.

Flujo de exportación: del vector a todos los tamaños

1. Diseñar el vector maestro

Crea tu icono a 1024x1024 en un editor vectorial. Usa trazados limpios y cerrados. Evita efectos que fallan en tamaños pequeños (degradados complejos, trazos menores de 2px en el renderizado final).

2. Crear variantes por plataforma

• iOS: Composición plana única, sin transparencia, sRGB
• Android: Separar en foreground.svg y background.svg
• Web/PWA: Puede necesitar transparencia para el favicon; considerar variante de icono mascarable

3. Exportación por lotes

# iOS sizes
for size in 40 58 60 76 80 87 120 152 167 180 1024; do
  rsvg-convert -w $size -h $size icon.svg > "ios/icon_${size}.png"
done

# Android density buckets
for pair in "mdpi:48" "hdpi:72" "xhdpi:96" "xxhdpi:144" "xxxhdpi:192"; do
  density="${pair%%:*}"; size="${pair##*:}"
  rsvg-convert -w $size -h $size icon.svg > "android/${density}/ic_launcher.png"
done

4. Verificar cada exportación

Revisa cada archivo buscando artefactos de aliasing en curvas, pérdida de detalle en tamaños pequeños, precisión de color y dimensiones correctas. Las tiendas rechazan tamaños incorrectos sin piedad.

Consideraciones de accesibilidad

La accesibilidad de iconos es ignorada por la mayoría de los diseñadores, pero afecta a millones de usuarios.

Deficiencia de visión del color: ~8% de los hombres y 0,5% de las mujeres están afectados. Asegura al menos 3:1 de contraste de luminancia entre primer plano y fondo. No dependas de la distinción rojo/verde. Prueba desaturando tu diseño a escala de grises.

Carga cognitiva en tamaños pequeños: Usa un único elemento focal claro. Evita detalles finos que se convierten en ruido por debajo de 48px. Haz tu silueta distintiva — los usuarios con baja visión dependen del reconocimiento de formas.

Funciones de plataforma: El modo de alto contraste de iOS puede alterar los tintes de fondo. El alto contraste de Android puede aplicar contornos a iconos adaptativos — verifica que tu icono funcione con contornos forzados.

El flujo de trabajo completo

1. Investigación: Captura iconos de la competencia en tu categoría. Encuentra qué destaca.
2. Boceto: Dibuja más de 20 conceptos explorando metáforas, formas tipográficas, formas abstractas.
3. Vectorizar: Lleva tus mejores bocetos a un editor vectorial o usa VectoSolve para convertir bocetos a mano en trazados SVG limpios.
4. Refinar en la cuadrícula: Alinea con las formas clave de Apple/Google. Simplifica agresivamente.
5. Probar en cada tamaño: Previsualiza a 16px, 48px, 60px, 120px, 512px y 1024px.
6. Exportar: Exporta por lotes todos los tamaños requeridos desde la fuente vectorial.
7. Validar: Prueba en dispositivos reales, modo claro y oscuro, en mockups de búsqueda de tienda.
8. Iterar: Modifica la fuente vectorial y reexporta. Nunca edites directamente una exportación raster.

El icono de tu app compite con millones de otros por la atención. Merece la precisión que solo un flujo de trabajo vectorial proporciona. Empieza con VectoSolve para establecer tu base vectorial, refina en el editor SVG y exporta con confianza sabiendo que cada píxel en cada tamaño está exactamente donde lo colocaste.