Iconos maskable y la zona de seguridad
Android recorta el icono de tu app a cualquier forma que use el launcher. Un icono maskable es uno diseñado para sobrevivir a ese recorte: fondo a sangre completa, arte mantenido dentro de la zona de seguridad.
Por qué un icono normal se recorta
Los distintos launchers de Android usan formas de icono diferentes. Para mantenerlas consistentes, Android toma tu icono y lo recorta a cualquier forma que use el dispositivo. Un icono estándar con un logo cerca del borde pierde las esquinas, y un icono con fondo transparente gana una fea línea de recorte.
Un icono maskable está hecho para ese recorte. Rellena todo el lienzo con un fondo para que no haya transparencia, y mantiene todo lo importante lejos de los bordes que podrían cortarse.
La zona de seguridad
La regla es simple: mantén el arte crítico dentro del círculo interior, aproximadamente el 80 por ciento central del lienzo. En un icono de 512x512 eso es un círculo centrado de unos 410 píxeles de diámetro. Cualquier cosa fuera de él está a merced del recorte.
El anillo exterior es sangrado. Debe ser solo fondo, sin logo, sin texto, sin ningún borde que te importaría perder. Como no sabes qué forma usará un dispositivo concreto, diseña de modo que el icono se lea bien tanto si acaba en círculo, en squircle o en cuadrado redondeado.
Decláralo en el manifest
{
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}El campo purpose le dice a Android qué icono enmascarar. Publica uno maskable junto a tu icono any estándar para cubrir ambos casos. También puedes definir "purpose": "any maskable" en un único icono si funciona bien recortado y sin recortar.
Preguntas frecuentes
¿Qué es un icono maskable?
Un icono de app diseñado para sobrevivir a que Android lo recorte con la forma del launcher. Tiene un fondo a sangre completa y mantiene el arte importante dentro de una zona de seguridad central, para que ninguna forma corte el logo.
¿Qué tamaño tiene la zona de seguridad maskable?
Mantén el contenido crítico dentro del 80 por ciento interior del lienzo, un círculo centrado. En un icono de 512x512 ese círculo mide unos 410 píxeles de ancho. Trata todo lo que quede fuera como sangrado recortable.
¿Cómo marco un icono como maskable?
Añade "purpose": "maskable" a la entrada del icono en el array icons de tu manifest. Publícalo junto a un icono con purpose any estándar, o usa "any maskable" en un icono que funcione recortado y sin recortar.
¿Por qué el icono de mi pantalla de inicio de Android se ve recortado?
Tu icono no es maskable, así que Android recortó un diseño que no estaba hecho para ello. Añade una versión maskable con fondo a sangre completa y arte con margen, y decláralo con purpose maskable.