Qué es un icono maskable
Cuando alguien instala una web app, el launcher muestra su icono con la forma propia del launcher: un círculo en un teléfono, un cuadrado redondeado o una gota en otro. Cómo se encaja en esa forma un icono normal con fondo transparente depende de la plataforma. Un icono maskable está hecho para recortarse: rellena todo el cuadrado con su propio fondo, así que, sea cual sea la forma que recorte el launcher, el resultado es un icono completo y con color.
El manifest de la web app marca la diferencia con el miembro purpose de cada icono. La especificación del W3C enumera tres valores, any, maskable y monochrome, y un icono sin purpose cuenta como any.
La zona segura: un círculo con un radio del 40 %
La especificación define dónde está el diseño a salvo de cualquier máscara: "un círculo cuyo centro es el centro del icono y cuyo radio es 2/5 (40 %) del tamaño del icono". En un icono de 512 px, eso es un círculo de 410 px de diámetro, centrado. MDN describe la misma zona como un círculo cuyo diámetro es el 80 % del icono, y web.dev advierte de que el borde exterior, alrededor de un 10 % por cada lado, puede quedar recortado.
La imagen muestra el icono maskable del paquete de ejemplo de más abajo. La primera copia lleva dibujada la zona segura; las otras tres son el mismo archivo bajo una máscara circular, una de cuadrado redondeado y una de gota. Como la marca se queda dentro del círculo, todas las máscaras la dejan entera, y solo cambia la forma del fondo.
El generador de favicon encaja el propio diseño, no su recuadro delimitador, dentro del círculo, menos el margen que elijas. Por eso una marca redonda puede llenar casi toda la zona segura, mientras que una foto cuadrada queda más pequeña, porque sus esquinas también tienen que caber dentro del círculo.
Purpose any o maskable: por qué dos archivos
Un icono puede declarar "purpose": "any maskable", y el artículo de web.dev sobre el manifest usa esa forma. El propio artículo de web.dev sobre iconos maskable lo desaconseja: un icono con el margen pensado para la máscara se ve demasiado pequeño donde se muestra sin recortar. Las fuentes no coinciden, y dos archivos evitan tener que elegir. El icono any conserva su transparencia y su diseño llena el cuadrado; el icono maskable tiene el fondo hasta los bordes y el diseño dentro de la zona segura.
| Purpose | Fondo | Diseño | Dónde se muestra |
|---|---|---|---|
any |
Transparente | Llena el cuadrado, menos el margen | En cualquier sitio donde un icono se muestre sin recortar |
maskable |
Tu color de fondo, de borde a borde | Dentro del círculo del 40 % | En los launchers que recortan los iconos con una forma |
Un manifest con los dos tipos
Este es el site.webmanifest del paquete de ejemplo. Las rutas de los iconos son relativas: la especificación resuelve src, igual que start_url, respecto a la URL del propio manifest, así que los iconos funcionan desde cualquier carpeta mientras estén junto al manifest.
{
"name": "png2svg.art",
"short_name": "png2svg",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
Enlázalo desde todas las páginas con <link rel="manifest" href="/site.webmanifest">. La especificación indica .webmanifest como la extensión de archivo registrada y recomienda servirlo como application/manifest+json, aunque se acepta cualquier tipo JSON.
Los tamaños no son arbitrarios. La guía de instalabilidad de MDN, actualizada en septiembre de 2026, dice que, entre otras condiciones, los navegadores basados en Chromium solo instalan una web app cuando su manifest tiene un nombre o un nombre corto, un start_url, un modo display e iconos de 192 y 512 px, y el sitio se sirve por HTTPS. Safari funciona de otra manera: el equipo de WebKit escribió para Safari 26 que no hay requisitos de instalabilidad y que se usan los iconos del manifest cuando un sitio los define. MDN también recomienda partir de un diseño de al menos 1024 px de lado; un mapa de bits pequeño ampliado a 512 px no gana detalle.
Cómo probar un icono maskable
En Chrome, abre las DevTools, ve a Application → Manifest (Aplicación → Manifiesto) y marca Show only the minimum safe area for maskable icons (mostrar solo el área segura mínima de los iconos maskable). La sección de iconos muestra entonces cada icono maskable recortado a la zona segura: si ahí falta algo importante, un launcher también puede recortarlo. La documentación de Chrome describe esta opción. web.dev también remite a Maskable.app, un sitio de terceros donde puedes ver un icono bajo varias máscaras. La prueba final es una app instalada en un teléfono real.
Un ejemplo real para descargar
Los iconos de arriba salen de una sola ejecución del generador de favicon sobre la propia marca de este sitio (un SVG del repositorio, no la subida de nadie), con un margen del 8 % y un fondo #e8efff. Son exactamente los archivos que crea la herramienta. Descarga el paquete de ejemplo (ZIP) para ver cada archivo con su README. Para la parte de la pestaña del navegador de ese mismo paquete, lee Favicon en SVG, PNG o ICO: cuál usar.