파비콘과 웹 매니페스트
이미지 하나를 넣으면 한 벌이 통째로 나옵니다. 여러 크기를 실제로 담은 ICO, 애플이 요구하는 방식대로 불투명하게 만든 Apple touch 아이콘, 매니페스트용 PNG, 매니페스트 파일 자체, 그리고 붙여 넣기만 하면 되는 HTML 블록. 게다가 안드로이드의 maskable 잘림을 물리기 전에 미리 보여 줍니다. 대부분의 아이콘이 조용히 가장자리를 잃는 자리가 바로 거기입니다.
이 원이 안드로이드가 잘라 낼 수 있는 범위입니다. 바깥에 있는 것은 기기에 따라 잘릴 수 있습니다.
| 파일 | 크기 | 쓰는 곳 |
|---|
.ico가 아직 중요한 이유
대부분의 브라우저는 PNG 하나면 충분하고, 탭 아이콘만 필요하다면 거기서 멈춰도 됩니다. 그런데도 ICO가 자리를 지키는 이유는 여러 해상도를 한 파일에 담고 어느 것을 쓸지는 운영체제가 고르게 하기 때문입니다. 탭은 16을, 고정한 바로가기나 바탕화면 링크는 32나 48을 쓰며, 각각은 큰 이미지를 그때그때 눌러 줄인 것이 아니라 그 크기에 맞춰 만든 비트맵에서 그려집니다. 여기서 나오는 파일은 작은 헤더가 붙은 PNG 컨테이너이고, 금세기에 나온 브라우저라면 모두 이것을 읽습니다.
maskable 안전 영역
안드로이드는 아이콘을 정사각형으로 보여 주겠다고 약속하지 않습니다. 런처에 따라 원으로, 스퀘어클로, 모서리 둥근 사각형으로 잘라 낼 수 있고, 보장되는 것은 안쪽 원뿐입니다. 너비의 팔십 퍼센트, 가운데. 가장자리까지 꽉 찬 그림이 바로 가장자리를 잃는 그림입니다. 해결책은 매니페스트 아이콘에 여백을 넣어 안전 영역 안으로 들이는 것이고, 여기 미리보기는 잘림선을 그려 주므로 사용자보다 먼저 확인할 수 있습니다.
Apple touch 아이콘에 투명이 없는 이유
iOS는 홈 화면 아이콘을 자기 나름의 둥근 모양 위에 합성하며, 알파 채널을 바라는 만큼 존중하지 않습니다. 투명한 부분은 검게 나옵니다. 그래서 이 파일 하나만은 인코딩 전에 지정한 배경색 위로 눌러 굽고, 매니페스트 PNG는 알파를 그대로 둡니다. 그쪽에서는 제대로 처리되기 때문입니다.
파일을 어떻게 두면 되나
에셋 폴더가 아니라 사이트 루트에 두세요. 브라우저와 크롤러는 파비콘 경로를 추측하고, 링크를 걸든 말든 가져가는 것들이 있습니다. 그다음 HTML 블록을 페이지의 head에 붙여 넣으세요. 실제로 파일을 둔 위치와 맞춰야 하는 줄은 매니페스트 경로 한 줄뿐입니다.
자주 묻는 질문
PNG가 있으면 favicon.ico는 없어도 되나요?
엄밀히 따지면 필요 없습니다. 실무적으로는 필요합니다. 수많은 크롤러와 피드 리더, 오래된 도구가 경로로 파비콘을 요청하고 여러분의 마크업은 아예 보지 않습니다. 몇 킬로바이트면 됩니다.
16픽셀에서 아이콘이 뭉개집니다. 어떻게 하죠?
여기서 고칠 수 있는 건 없습니다. 자리가 부족하기 때문입니다. 그 크기에서는 마크에 쓸 수 있는 판독 가능한 픽셀이 가로로 열 개 남짓입니다. 글자로 된 로고는 반드시 뭉개집니다. 단순화한 버전 — 형태 하나, 글자 하나 — 을 원본으로 넣고, 완전한 로고 조합은 다른 모든 곳에 쓰세요.
maskable 여백을 꺼도 되나요?
그림이 이미 넉넉한 자체 여백 안에 들어 있을 때만요. 프레임을 가득 채운다면 켜 두세요. 아니면 안드로이드가 안쪽까지 잘라 냅니다.
제 이미지가 어딘가로 올라가나요?
아닙니다. 모든 크기가 이 페이지의 캔버스에서 그려지고, 압축 파일도 메모리 안에서 만들어집니다. 아무것도 전송되지 않습니다.