PWA용 아이콘 사이즈

PWA의 기준에 부합하려면 여러 사이즈의 파비콘(로고)을 많이 준비해야 한다.

고맙게도 favic-o-matic에서 이러한 과정의 귀찮음을 조금 덜어주는데, 샘플 로고 한 장 달랑 들고가면 다양한 사이즈의 파비콘을 만들어 준다.

샘플의 사이즈는 512가 무난하지 않을까 싶어서 항상 512 사이즈로 로고를 하나 만들어서 제출해 왔는데 어째서인지 Mac OS에 웹앱을 설치하면 다른 응용프로그램에 비해 내 웹앱의 실행 아이콘이 항상 크게 나타나는 현상이 있었다.

실행에는 문제가 없지만 내 앱을 제외한 다른 아이콘들은 사이즈가 모두 칼 같이 맞는 것을 보니 나만 모르는 Mac OS의 권장 앱 아이콘 사이즈가 있는게 분명했다.

찾아보니 512px 사이즈를 사용하는 것은 맞지만 여백이 50px 필요하다는 내용이었다. 내용에 따르면 캔버스 512px에서 실제 로고가 차지하는 공간은 412px로 제작해야 한다. 내 로고는 512px을 꽉꽉 채워 만들었기 때문에 다른 아이들보다 덩치가 컸던 것이다. 사이즈 조절 후 테스트 해보니 다른 앱들과 같은 크기로 로고가 출력되는 것을 확인할 수 있었다.

- 2022.10.07 추가 -
iOS의 web app 아이콘은 여백이 검은색으로 출력된다.
apple-touch-icon들만 여백 없는 로고로 제작하면 해결.