파비콘 미리보기 점검 (작은 크기에서 뭉개지는지 확인)

16px가 모든 것을 결정한다

파비콘은 크기가 여럿이지만 실제로 가장 자주 보이는 것은 브라우저 탭의 16px입니다. 가로세로 열여섯 칸, 총 256개 픽셀 안에 로고를 담아야 한다는 뜻입니다. 여기서는 획이 두 개 겹치면 하나로 붙고, 가는 선은 회색 얼룩이 되며, 글자는 세 글자만 넘어가도 읽히지 않습니다. 그래서 큰 화면용 로고를 그대로 줄이는 대신, 로고에서 상징 하나만 떼어 내거나 첫 글자만 남긴 별도 이미지를 만드는 것이 일반적입니다. 이 도구가 16px를 화면에도 16픽셀 그대로 그리는 이유는, 확대해서 보면 멀쩡해 보이는 착시를 막기 위해서입니다.

OS 마스크에 잘리는 부분

웹 페이지의 파비콘은 사각형 그대로 표시되지만, 홈 화면에 추가된 아이콘은 다릅니다. iOS는 둥근 사각형으로 깎고, 안드로이드는 기기 제조사 설정에 따라 원형·둥근 사각형·물방울 모양 중 하나를 씌웁니다. 즉 아이콘의 네 귀퉁이는 보이지 않는다고 전제해야 합니다. 로고를 정사각형에 꽉 채워 넣으면 원형 마스크에서 가장자리가 잘려 나가므로, 홈 화면용 크기(180·192·512)는 5~10% 정도 여백을 두고 안전 영역 안에 형태를 모으는 편이 안전합니다. 안드로이드의 적응형 아이콘 규격은 바깥 33%까지 잘릴 수 있다고 보므로, 중요한 요소는 가운데 3분의 2 안에 두는 것이 원칙입니다.

투명 배경을 언제 쓸까

브라우저 탭용(16·32·48)은 투명 배경이 낫습니다. 브라우저 테마가 밝든 어둡든 아이콘만 떠 보이기 때문입니다. 반대로 iOS 홈 화면 아이콘은 투명을 허용하지 않고 검정이나 흰색으로 채워 버립니다. 브랜드 색 위에 흰 로고를 얹은 디자인이었다면 이때 전혀 다른 모양이 됩니다. 그래서 실무에서는 두 번 만듭니다. 탭용은 투명으로, 홈 화면용은 배경색을 채워서 각각 내보내고 크기별로 골라 씁니다. 이 도구에서도 배경 설정을 바꿔 두 번 점검하시면 됩니다.

세부 유지율을 읽는 법

결과에 나오는 세부 유지율은 16px 이미지와 64px 이미지에서 옆 픽셀과의 밝기 차이를 평균 내어 비교한 값입니다. 70% 이상이면 축소해도 형태가 대체로 살아 있다는 뜻이고, 45% 아래면 원래 있던 경계 대부분이 사라졌다는 뜻입니다. 단순한 도형이나 두꺼운 글자 하나는 대개 높은 값이 나오고, 그라데이션이나 가는 선이 많은 그림은 낮게 나옵니다. 다만 이 값은 참고용 수치일 뿐입니다. 색이 단조로운 아이콘은 잘 보이는데도 값이 낮게 나올 수 있으므로, 최종 판단은 실제 크기 미리보기를 눈으로 보고 하시는 것이 맞습니다.

자주 묻는 질문