Si instalaste una app web progresiva (AWP) en un teléfono Android reciente, puedes es posible que el ícono de la app tenga un fondo blanco. Se presentó Android 8.0 íconos adaptables, que muestran íconos de apps de distintas formas en el dispositivo e implementar modelos automáticamente. Los íconos que no usan este formato tienen fondos blancos.
Los íconos enmascarables son un nuevo formato de íconos para Chrome y Firefox que permite a las Las Progressive Web App utilizan íconos adaptables y te brindan más control sobre tus la apariencia del ícono.
¿Mis íconos actuales están listos?
Debido a que los iconos enmascarables deben admitir una variedad de formas, debes suministrar imagen opaca con un poco de padding que el navegador puede recortar para lograr de forma y tamaño para cualquier navegador o plataforma.
En la especificación de los íconos enmascarables, se incluye una interfaz estandarizada "zona segura mínima" que respetan todas las plataformas. Las partes importantes de tu al igual que tu logotipo, debe estar dentro de un área circular en el centro del ícono con un radio equivalente al 40% del ancho del ícono. El borde externo del 10% podría ser recortado en algunas plataformas.
Puedes comprobar qué partes de tus íconos están dentro de la zona segura con Chrome Herramientas para desarrolladores. Con tu Progressive Web App abierta, inicia Herramientas para desarrolladores y navega a el panel Aplicación. En la sección Íconos, puedes elegir las siguientes opciones: Muestra solo el área segura mínima para los íconos enmascarables. Esto recorta los iconos para solo se vea el área segura. Si tu logotipo es visible dentro de esta área segura, que tu ícono esté listo.
Para probar tu ícono enmascarable con una variedad de formas de Android, usa el de Tiger Oakes Maskable.app Abre un ícono, y Maskable.app te permitirá hacerlo. probar con 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 el Editor de Máskable.app. Carga tu icono, ajusta el y el tamaño y, luego, exportar la imagen.
Después de crear un ícono enmascarable y probarlo en Herramientas para desarrolladores, debes actualizar
el manifiesto de la app web para que apunte al nuevo recurso. El
El manifiesto de app web proporciona información sobre tu app web en un archivo JSON.
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 de "any". En Android, el tamaño de estos íconos se cambia sobre blanco.
en segundo plano.
{
…
"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 que un ícono sea enmascarable, establece su valor de purpose en "maskable" para indicar
que debe usarse con máscaras de icono. Esto quitará el fondo blanco y
te da más control sobre la apariencia del ícono. También puedes especificar varias
con fines separados por espacios (por ejemplo, "any maskable") si quieres que
ícono enmascarable para usar sin máscara en otros dispositivos.
Agradecimientos
Joe Medley revisó esta página.