PWA를 제작하기 위해서는 Maskable 아이콘이 필요합니다. 아이콘은 Maskable.app Editor에서 제작할 수 있습니다. 여기서는 아이콘 제작에 쓰일 이미지를 업로드하고, 아이콘의 색상 및 크기 등을 설정할 수 있는 기능을 제공합니다.
우선 [ Editor ] 메뉴를 눌러서 아이콘을 제작할 수 있는 페이지로 이동합니다.
Upload 버튼을 클릭하여 아이콘 제작에 사용할 이미지를 업로드합니다. 저는 [ 프로젝트 폴더 ] - [ img ] - loading-768x768.png 파일을 사용하겠습니다. 여러분이 원하는 다른 이미지를 업로드하여도 무방합니다. 단, 배경색이 없는 이미지를 사용하는 것을 권장합니다.
이미지를 업로드하였다면 이미지의 padding 값을 설정하겠습니다. 25%가 적당할 것 같습니다.
이제는
Background 색상을 변경하겠습니다. 만약 본인이 업로드한 이미지가 이미 배경색을 갖고 있다면 이 부분은 건너뛰어도 좋습니다. 저는 '1만 시간의 법칙' 메인 페이지의 색상과 동일한 색상인 #5B2386(R:91, G:35, B:134)을 선택하였습니다. 
Export 버튼을 클릭하여 우리가 제작한 아이콘을 다운로드해 봅시다. 버튼을 클릭하면 아래와 같이 아이콘의 크기를 선택하는 창이 나타납니다. 512x512를 선택하고 Download 버튼을 클릭합니다.
PWA를 제작할 때 512x512 크기의 아이콘을 업로드해야 하기 때문에 512x512를 선택하는 것을 권장 드립니다. 또한, Max size가 512x512보다 작을 경우 선택되지 않을 수 있습니다. 이 경우에는 사이즈가 더 큰 이미지를 업로드해 주시길 바랍니다.
다운로드 버튼을 클릭하면 완성된 maskable 아이콘을 확인할 수 있습니다.
