Icono maskable: zonas seguras y el campo purpose
Un icono maskable es un icono de PWA dibujado para llenar todo su cuadrado, de modo que la plataforma pueda recortarlo a la forma que use (círculo, squircle, cuadrado redondeado) sin cortar nada importante. Mantienes el logotipo dentro de una zona segura de aproximadamente el 80% interior, un círculo centrado cuyo diámetro es el 80% del ancho del icono, y dejas que el fondo llegue a los cuatro bordes. Lo declaras en el manifiesto de aplicación web con "purpose": "maskable".
El problema que resuelve
Los lanzadores de Android aplican una máscara de forma a cada icono de app para que la pantalla de inicio se vea coherente, y la forma varía según el dispositivo y el lanzador: círculo en uno, squircle en otro, cuadrado redondeado en un tercero. Un icono web normal entregado a ese sistema se encoge dentro de una caja blanca redondeada o, peor, se recorta atravesando el logotipo.
Un icono maskable se crea pensando en ese recorte. El diseño se extiende hasta cada borde, y el contenido significativo queda bien dentro, de modo que cualquiera de esas máscaras cae sobre el fondo y no sobre la marca. Es la misma idea que los iconos adaptativos de Android, expresada como una sola imagen más una declaración.
Cómo declarar uno
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]Incluye ambos. El icono de propósito por defecto se usa donde la plataforma no recorta; el maskable se usa donde sí.
Zona segura según el tamaño del icono
| Tamaño del icono | Diámetro de la zona segura (80%) | Margen libre por borde |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
Preguntas frecuentes sobre iconos maskable
¿Puedo simplemente añadir relleno a mi icono actual?
Esa es la mayor parte del trabajo, pero el relleno tiene que ser fondo lleno en vez de transparencia. Un margen transparente no le da al lanzador nada donde recortar y acabas con un logotipo pequeño sobre un mosaico blanco liso.
¿Cómo compruebo que la zona segura es correcta?
Superpón un círculo centrado al 80% del ancho del icono y confirma que nada que te importe lo cruza, luego instala la PWA en un dispositivo Android y mira el lanzador. Las DevTools de Chromium también muestran una vista previa de los iconos del manifiesto en el panel Application.
¿iOS usa iconos maskable?
No. iOS toma el icono de la pantalla de inicio de la etiqueta link apple-touch-icon y aplica su propia máscara fija de esquinas redondeadas, así que el propósito maskable no tiene efecto ahí.