https://developer.chrome.com/docs/lighthouse/pwa/maskable-icon-audit/?utm_source=lighthouse&utm_medium=devtools

Before

{
  "theme_color": "#84A59D",
  "background_color": "#84A59D",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Green Cherry Business ",
  "description": "Green Cherry Business",
  "short_name": "Green Cherry Business ",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

After

{
  "theme_color": "#84A59D",
  "background_color": "#84A59D",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Green Cherry Business ",
  "description": "Green Cherry Business",
  "short_name": "Green Cherry Business ",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

• "purpose": "any maskable"

• any: 아이콘이 어떤 목적으로든 사용될 수 있음.(브라우저는 아이콘을 사용하는 데에 있어 어떠한 제한도 갖지 않음)

• maskable: 아이콘이 마스크 가능한 아이콘으로 간주되어 브라우저가 아이콘의 모양을 변경할 수 있습니다.
  PWA의 아이콘이 다양한 기기와 플랫폼에서 최적화된 형태로 표시될 수 있게 해줌!