Una guía práctica para los íconos de aplicaciones de Android: explicación de los íconos adaptables (y cómo generar los suyos correctamente)
Es una sorpresa común para los desarrolladores novatos de Android: pules un solo PNG cuadrado para el ícono de tu aplicación, lo exportas en un tamaño ordenado de 512x512 y se ve perfecto en tu editor de imágenes. Luego instalas una versión de depuración en un teléfono Samsung y el ícono de repente parece recortado y ligeramente descentrado, como si parte del logotipo hubiera sido cortado. No hay ningún problema con el archivo en sí. El problema es que una sola imagen cuadrada nunca sobreviviría al contacto con el mundo real de los lanzadores de Android, cada uno de los cuales recorta, enmascara y reforma los íconos de manera diferente. Si aún no te has encontrado con esto, es solo cuestión de tiempo antes de que lo hagas, así que veamos lo que sucede bajo el capó y cómo hacerlo bien la primera vez.
Por qué un solo PNG cuadrado ya no es suficiente
En los primeros años de Android, los íconos de las aplicaciones eran exactamente lo que parecían: un único PNG cuadrado (u ocasionalmente de forma libre) que cada lanzador mostraba tal cual. Eso funcionó bien hasta que los fabricantes comenzaron a diferenciar visualmente sus teléfonos, y uno de los lugares más fáciles para hacerlo fue la pantalla de inicio. Samsung quería cuadrados redondeados, algunas máscaras OEM chinas querían diferentes tratamientos en las esquinas y Android de serie finalmente se decidió por círculos. De repente, exactamente el mismo archivo de ícono se veía notablemente diferente y, a veces, visiblemente peor, dependiendo de en qué teléfono apareciera.
La respuesta de Google, introducida con Android 8.0 Oreo, fue el sistema de iconos adaptativos. En lugar de proporcionar una forma fija, los desarrolladores proporcionan ilustraciones en capas que el propio sistema operativo enmascara en cualquier forma que prefiera un lanzador determinado. La identidad visual se mantiene coherente; solo cambia la silueta exterior.
¿Qué es exactamente un icono adaptativo?
Un ícono adaptable se construye a partir de dos capas separadas, cada una de las cuales ocupa un lienzo de 108 ppp por 108 ppp: una capa de fondo y una capa de primer plano. Android combina los dos y luego aplica cualquier forma de máscara que utilice el iniciador actual, ya sea un círculo, un cuadrado redondeado, una lágrima o algo completamente diferente. La estructura de dos capas es lo que permite a Android agregar sutiles efectos de movimiento y paralaje, ya que las capas pueden cambiar de forma independiente cuando tocas o arrastras un ícono.
En los recursos de una aplicación, esto generalmente se define a través de un archivo XML como mipmap-anydpi-v26/ic_launcher.xml, que simplemente apunta a los elementos de diseño de fondo y primer plano en lugar de contener datos de píxeles en sí. Un ic_launcher.png plano tradicional todavía se mantiene como alternativa para dispositivos que ejecutan Android 7.1 o anterior, que son completamente anteriores al sistema de íconos adaptativos.
Por qué es importante la zona segura
Esta es la parte que más hace tropezar a la gente. Aunque el lienzo para cada capa es de 108 dp por 108 dp, solo se garantiza que el círculo interior de 66 dp por 66 dp, centrado en ese lienzo, será visible independientemente de la forma de máscara que se aplique. Esta región interior se denomina comúnmente zona segura. Cualquier cosa que esté fuera de ella podría mostrarse en una máscara circular y luego recortarse abruptamente en una máscara de ardilla o lágrima más agresiva, o viceversa.
Este es exactamente el tipo de problema que aparece cuando un logotipo se dibuja cerca de los bordes del lienzo para maximizar su tamaño visual: puede verse perfecto en una máscara circular pero quedar recortado de manera desigual en la máscara de ardilla de Samsung. La solución no es un rediseño, simplemente reduce ligeramente la obra de arte para que el contenido significativo permanezca dentro de la zona segura sin importar qué forma se aplique finalmente.
Formas del lanzador que encontrarás
| Forma | donde lo verás |
|---|---|
| Círculo | Android estándar, lanzador de píxeles (el predeterminado desde hace mucho tiempo) |
| Ardilla (cuadrado redondeado) | Samsung One UI y varias otras máscaras de Android |
| Cuadrado redondeado (superelipse) | iOS, aplicado automáticamente por el sistema sin control del desarrollador |
| Lágrima | Se ofrece como una opción seleccionable en algunas versiones de software de Samsung. |
| Cuadrado con esquinas suaves. | Varios diseños de lanzadores de otros fabricantes |
La conclusión práctica es que no puedes elegir cuál de estas formas terminará usando tu ícono. Los usuarios de lanzadores de Android a menudo pueden incluso elegir su forma preferida en un menú de configuración. Su única palanca real es asegurarse de que la obra de arte sobreviva a todas ellas con gracia, que es exactamente lo que la zona segura debe garantizar.
Construyendo los activos: tamaños y densidades que necesita
| cubo de densidad | Tamaño del icono del iniciador |
|---|---|
| mdpi | 48 x 48 píxeles |
| hdpi | 72 x 72 píxeles |
| xhdpi | 96 x 96 píxeles |
| xxhdpi | 144 x 144 píxeles |
| xxxhdpi | 192 x 192 píxeles |
| Ícono de listado de Play Store | 512 x 512 píxeles |
Si también envía la aplicación en iOS, agregue otro conjunto completo, ya que los requisitos de íconos de la App Store de Apple alcanzan un máximo de 1024x1024 y usan un formato completamente diferente, sin capas y sin transparencia alguna.
La forma manual versus el uso de un generador
Puedes producir absolutamente cada uno de estos tamaños a mano en un editor de imágenes, o a través del Image Asset Studio integrado de Android Studio, que maneja la escala de densidad y las vistas previas de máscaras razonablemente bien para un solo proyecto. Cuando esto se vuelve tedioso es cuando mantienes un sistema de diseño en varias aplicaciones, necesitas exportar iOS de la misma obra de arte maestra o simplemente quieres una forma rápida de verificar cómo se comporta un diseño en cada forma antes de comprometerte con él.
Genere todos los tamaños a partir de una imagen maestra
Nuestro Generador de iconos de aplicaciones toma una única imagen fuente de alta resolución y produce el conjunto completo de grupos de densidad de Android, la estructura adaptable de primer plano/fondo del ícono y el tamaño de la lista de Play Store, todo desde una sola carga, por lo que no tiene que exportar ni cambiar el nombre de una docena de archivos manualmente.
Extracción de iconos de un APK existente
A veces la necesidad va en la dirección opuesta. Tal vez heredó un proyecto sin sus archivos de diseño originales, o desea ver exactamente cómo un competidor estructuró su ícono antes de diseñar el suyo propio, o simplemente necesita extraer un ícono de un APK creado para reutilizarlo en una herramienta relacionada o activo de marketing. Dado que un APK es efectivamente un archivo estructurado que contiene todos los recursos de una aplicación, los archivos del ícono de inicio están físicamente presentes dentro de él y se pueden extraer directamente, en lugar de reconstruir desde cero.
Nuestro Extractor de iconos extrae exactamente estos archivos de cualquier APK que cargue, brindándole los recursos de íconos sin formato en cualquier resolución que envió el desarrollador original, lo que a menudo es la forma más rápida de recuperar un archivo fuente perdido o estudiar cómo otra aplicación abordó el mismo problema de diseño.
Errores comunes de iconos que se señalan en la revisión
- Hornear con relleno adicional o UI chrome. Un efecto de sombra paralela, borde o esquina redondeada agregado manualmente dentro de la imagen entra en conflicto con el propio enmascaramiento del sistema y, a menudo, parece duplicado o desalineado.
- Utilizando un fondo blanco puro sin bordes distintivos. En lanzadores con temas claros, el ícono puede volverse casi invisible contra el fondo de la pantalla de inicio.
- Detalle demasiado fino. El texto y las líneas intrincadas que se ven nítidas a 512 px con frecuencia se convierten en una mancha ilegible una vez reducidas a 48 px, que es como la mayoría de los usuarios lo ven en el día a día.
- Una discrepancia entre el ícono de la lista de Play Store y el ícono que se instala. Tanto los revisores como los usuarios notan cuando estos dos no coinciden y se lee como descuidado o, peor aún, sospechoso.
- Olvidar por completo el retroceso del legado. Si su aplicación aún admite versiones de Android anteriores a 8.0, omitir la opción PNG plana puede dejar a esos usuarios con un ícono roto o de apariencia genérica.
Probar su ícono en todas las formas antes de enviarlo
Antes de finalizar un ícono, vale la pena obtener una vista previa de él al menos bajo una máscara circular y una máscara de ardilla una al lado de la otra, en lugar de asumir que se traducirá limpiamente. Image Asset Studio de Android Studio incluye una vista previa en vivo de varias formas de iniciador exactamente por esta razón, y solo toma un minuto detectar un problema que de otro modo solo surgiría después de la publicación, cuando un usuario en la forma de iniciador "incorrecta" informa que algo se ve mal.
Conclusiones clave
- Los iconos adaptativos utilizan dos capas, fondo y primer plano, en un lienzo de 108 dp, que el sistema enmascara en diferentes formas por iniciador.
- Solo se garantiza que la zona segura interior de 66 dp sea visible en todas las formas de máscara; Mantenga obras de arte significativas en su interior.
- Aún necesitas un ícono heredado plano para dispositivos con Android 7.1 o anterior.
- Un generador puede producir cada densidad requerida y el tamaño de la lista de Play Store a partir de una imagen maestra, lo que ahorra una importante cantidad de trabajo de exportación manual.
- Los íconos se pueden extraer directamente de un APK existente cuando se pierden los archivos fuente o se necesitan estudiar los activos de otra aplicación.
Preguntas Frecuentes (FAQ)
¿Cuál es el tamaño de píxel real requerido para el ícono de una lista de Play Store?
512x512 píxeles, un PNG de 32 bits con un canal alfa. Esto es independiente de los tamaños de los iconos del iniciador incluidos dentro del propio APK.
¿Es necesario que la capa de fondo de mi icono adaptable sea de un color sólido?
No necesariamente es un color plano, pero generalmente debe ser opaco y simple, ya que se puede cambiar, escalar o enmascarar de maneras que no controlas por completo. Los fondos ocupados o transparentes tienden a parecer inconsistentes entre los lanzadores.
¿Puedo reutilizar mi diseño de ícono adaptable de Android directamente para iOS?
No directamente. iOS utiliza una única imagen cuadrada plana con esquinas redondeadas aplicadas por el sistema en lugar de capas separadas, por lo que normalmente exportas una versión simplificada y aplanada de la misma obra de arte para iOS.
¿Por qué mi ícono se ve bien en mi teléfono pero borroso en la lista de Play Store?
Esto suele suceder cuando el ícono de la lista se amplió a partir de una imagen de origen pequeña. Comience siempre desde un archivo maestro de al menos 1024x1024 píxeles y exporte cada tamaño requerido hacia abajo a partir de ese.
¿Qué sucede si me salto el ícono heredado alternativo para versiones anteriores de Android?
Los dispositivos con Android 7.1 o anterior, que no admiten íconos adaptables, pueden recurrir a un ícono genérico del sistema o representar su ícono incorrectamente. Es seguro omitirlo solo si la versión mínima de Android compatible con su aplicación es 8.0 o superior.
No necesitas experiencia en teoría del diseño para nada de esto, solo ser consciente de que tu ícono cambiará de forma que no controlas en el momento en que sale de tus manos. Diseñe para la zona segura, mantenga un respaldo heredado, genere cada tamaño requerido a partir de un archivo maestro limpio y su ícono se mantendrá sin importar en qué iniciador aterrice.