다양한 해상도에서 깨지지 않도록 여러 해상도, dpi의 파일이 필요하다
https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon#app-icon-sizes 에서 확인할 수 있다.
16x16, 32x32, 128x128, 256x256, 512x512 px 크기의 아이콘 파일과 각각의 @2x 파일이 필요하다.
2x는 figma에서 export시 2x로 설정하면 된다.
<aside> 💡 2x 는 2배의 dpi를 의미한다. 일반 png파일은 72dpi인데, 2x png 파일은 144dpi로 같은 물리적인 거리 안에 2배 많은 픽셀이 들어있다는 뜻이다.
</aside>
<aside> 💡 stack overflow 답변 이나 npm모듈 에서는 dpi를 2배로 설정해주지 않고 단순히 가로와 세로만 2배씩 증가시켜주고 있는데, 이렇게 하면 launchpad 에서 폴더로 집어넣을 경우 아이콘이 깨지는 버그가 발생한다.
</aside>
아래와 같이 이미지 파일의 파일명을 설정한다.
+---------------------+--------------------+--------------+
| filename | resolution, pixels | density, PPI |
+---------------------+--------------------+--------------+
| icon_16x16.png | 16x16 | 72 |
| icon_16x16@2x.png | 32x32 | 144 |
| icon_32x32.png | 32x32 | 72 |
| icon_32x32@2x.png | 64x64 | 144 |
| icon_128x128.png | 128x128 | 72 |
| icon_128x128@2x.png | 256x256 | 144 |
| icon_256x256.png | 256x256 | 72 |
| icon_256x256@2x.png | 512x512 | 144 |
| icon_512x512.png | 512x512 | 72 |
| icon_512x512@2x.png | 1024x1024 | 144 |
+---------------------+--------------------+--------------+
맥용 아이콘 파일(.icns) 을 만들기 위해서는 macOS의 iconutil 이 필요하다.
위에서 준비한 파일을 $FILENAME.iconset 폴더에 넣고
iconutil -c icns MyIcon.iconset
를 실행한다