Íconos de apps que se adaptan a las plataformas
¿Qué son los íconos enmascarables?
Si instalaste una app web progresiva en un teléfono Android reciente, es posible que notes que el ícono aparece con un fondo blanco. Android Oreo introdujo los íconos adaptables, que muestran los íconos de las apps en una variedad de formas en los distintos modelos de dispositivos. Los íconos que no siguen este formato nuevo reciben fondos blancos.
Los íconos enmascarables son un nuevo formato de ícono que te brinda más control y permite que tu app web progresiva use íconos adaptables. Si proporcionas un ícono enmascarable, este puede llenar toda la forma y se verá muy bien en todos los dispositivos Android. Recientemente, Firefox y Chrome agregaron compatibilidad con este formato nuevo, y puedes adoptarlo en tus apps.
¿Mis íconos actuales están listos?
Dado que los íconos enmascarables deben admitir varias formas, debes proporcionar una imagen opaca con un poco de padding que el navegador pueda recortar para alcanzar la forma y el tamaño requeridos. Es mejor no depender de ninguna forma en particular, ya que la forma definitiva varía según el navegador y la plataforma.
Afortunadamente, existe una "zona segura mínima" bien definida y 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 10% se puede recortar.
Puede verificar qué partes de los í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. Se cortarán los íconos para que solo se vea el área segura. Si tu logotipo es visible dentro de esta área segura, estás listo.
Para probar tu ícono enmascarable con la variedad de formas de Android, usa la herramienta Maskable.app que creó Tiger. Abre un ícono. Maskable.app te permitirá probar varias formas y tamaños. Podrás compartir la vista previa con otros miembros de tu equipo.
¿Cómo adopto íconos enmascarables?
Si quieres 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 exporta la imagen.
Una vez que hayas creado un ícono enmascarable y lo hayas probado 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.
Para la inclusión de íconos enmascarables, el campo purpose le indica al navegador cómo debe usarse tu ícono. De forma predeterminada, los íconos tendrán el propósito "any". En Android, el tamaño de estos íconos cambiará 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"`
},
…
],
…
}
Los íconos enmascarables deben usar un valor diferente para purpose: "maskable". Esto indica que una imagen está diseñada para usarse con máscaras de íconos, lo que te brinda más control sobre el resultado.
De esta manera, tus íconos no tendrán un fondo blanco. 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.
De esta manera, puedes crear tus propios íconos enmascarables y asegurarte de que tu app se vea bien de borde a borde (y en relación con el valor, de un círculo a un círculo o de óvalo a óvalo mostrar).
Agradecimientos
Joe Medley revisó este artículo.