16px에서 읽히는가
파비콘의 핵심은 이것 하나입니다. 브라우저 탭에 뜨는 크기가 16px입니다. 여기서 뭉개지면 아무 소용이 없습니다.
- 글자는 1자 — 2자를 넣으면 16px에서 읽히지 않습니다.
- 단순한 형태 — 복잡한 로고는 그대로 쓰면 얼룩이 됩니다. 상징적인 부분만 잘라 쓰세요.
- 대비를 강하게 — 배경과 전경의 명암 차이가 커야 작은 크기에서 보입니다.
필요한 크기
- 16, 32 — 브라우저 탭과 즐겨찾기
- 180 — iOS 홈 화면 (apple-touch-icon)
- 192, 512 — 안드로이드 홈 화면과 PWA
요즘은 하나의 큰 PNG(512px)만 두고 브라우저가 줄이게 하는 경우도 많지만, 작은 크기를 따로 만들면 선명함이 확실히 다릅니다.
ICO 파일은 필요할까
예전에는 favicon.ico가 표준이었지만, 지금은 PNG로 충분합니다. 모든 최신 브라우저가 PNG 파비콘을 지원합니다. ICO는 아주 오래된 환경을 지원해야 할 때만 필요합니다.
둥근 모서리
iOS와 안드로이드는 홈 화면에 추가할 때 자체적으로 모서리를 둥글게 만듭니다. 미리 둥글게 만들어 두면 이중으로 깎일 수 있으니, 홈 화면용은 사각으로 만드는 편이 안전합니다.
브랜드 색으로
사이트 색과 맞추면 인상이 통일됩니다. 로고에서 색을 뽑으려면 이미지 색상 추출, 명도 단계를 만들려면 색상 팔레트 만들기를 쓰세요.
파일은 밖으로 나가지 않습니다
아이콘은 브라우저 안에서 그립니다. 올린 로고가 서버로 전송되지 않습니다.
어느 크기가 어디에 쓰이는가
| 크기 | 쓰이는 곳 |
|---|---|
| 16 × 16 | 브라우저 탭 |
| 32 × 32 | 즐겨찾기, 고해상도 탭 |
| 180 × 180 | iOS 홈 화면 아이콘 |
| 192 × 192 | 안드로이드 홈 화면 |
| 512 × 512 | 앱 설치 화면과 스플래시 |
가장 중요한 것은 16px입니다. 브라우저 탭에 실제로 뜨는 크기이고, 여기서 알아볼 수 없으면 나머지 크기는 소용이 없습니다. 복잡한 로고는 글자 한 자로 줄이는 편이 낫습니다.