Si instalaste una app web progresiva (AWP) en un teléfono Android reciente, es posible que notes que el ícono de la app tiene un fondo blanco. Android 8.0 introdujo íconos adaptables, que muestran los íconos de las apps en una variedad de formas en los modelos de dispositivos. Los íconos que no usan este formato tienen fondos blancos.
Los íconos enmascarables son un nuevo formato de ícono para Chrome y Firefox que permite que tu app web progresiva use íconos adaptables y te brinda más control sobre la apariencia de tu ícono.
¿Mis íconos actuales están listos?
Debido a que los íconos enmascarables deben admitir varias formas, debes proporcionar una imagen opaca con un poco de padding que el navegador pueda recortar a la forma y el tamaño requeridos para cualquier navegador o plataforma.
La especificación del ícono enmascarable incluye una "zona segura mínima" estandarizada que todas las plataformas respetan. Las partes importantes del ícono, como el logotipo, deben estar dentro de un área circular en el centro, con un radio equivalente al 40% del ancho del ícono. El borde exterior del 10% podría recortarse en algunas plataformas.
Puedes verificar qué partes de tus íconos están dentro de la zona segura con las Herramientas para desarrolladores de Chrome. Con la app web progresiva abierta, inicia Herramientas para desarrolladores y navega al panel Aplicación. En la sección Íconos, puedes elegir Mostrar solo el área segura mínima para los íconos enmascarables. Esto recorta tus íconos para que solo se vea el área segura. Si tu logotipo es visible dentro de esta área segura, el ícono está listo.
Para probar tu ícono enmascarable con una variedad de formas de Android, usa Maskable.app de Tiger Oakes. Abre un ícono, y Maskable.app te permitirá probar varias formas y tamaños, y compartir la vista previa con tu equipo.
¿Cómo adopto íconos enmascarables?
Para crear un ícono enmascarable basado en un ícono existente, puedes usar Maskable.app Editor. Carga el icono, ajusta el color y el tamaño y, luego, exporta la imagen.
Después de crear un ícono enmascarable y probarlo en Herramientas para desarrolladores, deberás actualizar el manifiesto de la app web para que apunte al recurso nuevo. El manifiesto de la app web proporciona información sobre tu app web en un archivo JSON e incluye un array icons.
El campo purpose le indica al navegador cómo debe usarse tu ícono. De forma predeterminada, los íconos tienen el propósito "any". En Android, se cambia el tamaño de estos íconos sobre un fondo blanco.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Para hacer que un ícono sea enmascarable, establece su valor purpose en "maskable" para indicar que se debe usar con máscaras de ícono. De esta manera, se quita el fondo blanco y se te brinda más control sobre la apariencia del ícono. También puedes especificar varios propósitos separados por espacios (por ejemplo, "any maskable") si deseas que el ícono enmascarable se use sin una máscara en otros dispositivos.
Agradecimientos
Joe Medley revisó esta página.