Qué es Generador de zona segura de icono PWA?
Un icono maskable es un icono de PWA que puede adaptarse a diferentes formas de plataforma. Android puede mostrarlo como un círculo, squircle o cuadrado redondeado según el dispositivo. La zona segura es la porción interna del icono que se garantiza que sea visible independientemente de la forma. Las guías de PWA recomiendan que el contenido importante del icono ocupe al menos el 80% del lienzo, con relleno para que el contenido permanezca dentro de la zona segura.
Respuesta rápida
Cargue su icono PWA cuadrado para previsualizar la superposición de la zona segura maskable. Mantenga el contenido importante dentro de la zona segura (el 80% interior del icono). Exporte las entradas de iconos del manifiesto con propósitos any y maskable en tamaños 192x192 y 512x512.
Last updated: 2026-05-28
Limitaciones
- La vista previa muestra una zona segura circular, pero las formas reales de la plataforma varían (squircles, cuadrados redondeados, círculos). La zona circular es una aproximación razonable del peor caso para todas las formas.
- Esta herramienta proporciona una vista previa visual solamente. No exporta archivos PNG reales — use un editor de imágenes o herramienta de generación de iconos para crear los archivos de icono finales en los tamaños requeridos.
- Algunas plataformas aplican transformaciones adicionales más allá del recorte maskable, como sombras paralelas o tratamientos de iconos específicos de la plataforma que no se pueden previsualizar aquí.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Cargue un icono PNG cuadrado (se recomienda 512x512 o más grande) para su PWA.
- Ajuste el porcentaje de relleno de la zona segura — 15% (estándar PWA) significa una zona segura visible del 85%.
- Previsualice la superposición en el icono para confirmar que el contenido importante esté dentro del círculo de zona segura discontinua.
- Copie las entradas de iconos del manifiesto con purpose: maskable y exporte sus iconos en 192x192 y 512x512.
Para qué puedes usarla
- Verificar que los elementos visuales clave de su icono de aplicación permanezcan dentro de la zona segura maskable antes de implementar en producción.
- Generar entradas de iconos de manifiesto configuradas correctamente con tamaños, propósito y campos de tipo adecuados.
- Previsualizar cómo los diferentes valores de relleno afectan la porción visible de su icono en Android y Chrome OS.