Si tienes un dispositivo Android con la versión Oreo habrás visto que los iconos han cambiado con respecto a las versiones anteriores de Android.  Si tenías instalada una PWA puede ser que el icono que tenía se vea un poco extraño, con un borde blanco. ¿Qué ha ocurrido? Android ha comenzado a usar Maskable icons y Adaptive icons.

¿Qué son Maskable icons y Adaptive icons?

Adaptive icons son aquellos iconos que cambian de forma en función al dispositivo en el que se estén mostrando. Se caracterizan principalmente porque el logo de la app ocupa todo el espacio disponible del icono, sin dejar bordes.

Maskable icons es una nueva funcionalidad de Google Chrome y que pronto estará disponible en otros navegadores. Maskable icons permite a nuestra PWA usar adaptive icons. De esta forma, a simple vista es imposible diferenciar el icono de una app nativa del icono de una PWA.

Veamos un ejemplo

Desde la version Android 8.0 Oreo, los iconos de las apps son más redondeados y la imagen/logo de la app debe ocupar todo el espacio disponible:

Resultado de imagen de oreo android icons


Sin embargo, el formato de los iconos puede cambiar en función al dispositivo. Por ejemplo, en dispositivos Samsung los iconos no son tan redondeados, son un poco más cuadrados. Por ello, Android nos recomienda seguir el siguiente template a la hora de crear un icono para nuestra app.

 

Resultado de imagen de adaptive icon template

¿Cómo afecta esto a las PWA?

Desde la versión 79 de Google Chrome, se ha introducido la funcionalidad Maskable icons para las Progressive web apps. Como hemos explicado antes, Maskable icons nos permite que nuestra PWA tenga adaptive icons.

Por ello, a la hora de diseñar el icono de nuestra PWA debemos tener en cuenta que este se debe ajustar perfectamente al template proporcionado por Android para adaptive icons. Es decir, el icono debe adaptarse perfectamente un círculo con un diámetro que representa el 80% del lienzo.

Si no tenemos en cuenta esta nueva forma, el icono de nuestra PWA desentonará entre el resto de iconos de las apps instaladas en nuestro dispositivo. Probablemente tendrá un borde blanco que se rellenará para adaptar el logo al tamaño del adaptive icon.

Icons contained inside white circles compared to icons covering its entire circle

Por ahora esto es todo lo que tenemos que contaros sobre Adaptive icons y Maskable icons para Progressive web app. ¿Qué os ha parecido? ¿Habíais notado el cambio de iconos?
 
Si tienes alguna duda o necesitas que te ayudemos, no dudes en escribirnos a [email protected] o desde nuestro formulario de contacto. ¡Estaremos encantados de ayudarte!