파비콘은 만들기는 쉬운데 '몇 픽셀로 만들어야 하나'에서 한 번 막힙니다. 16이라는 말도 있고 512라는 말도 있는데, 둘 다 맞습니다. 쓰이는 자리가 다르기 때문입니다.
ICO는 이미지가 아니라 상자다
JPG나 PNG는 한 파일에 그림 한 장이 들어 있습니다. ICO는 다릅니다. 여러 해상도의 그림을 한 파일에 나란히 담아 두고, 운영체제나 브라우저가 필요한 자리에 맞는 크기를 골라 씁니다. 그래서 favicon.ico 하나만 두고도 탭에서는 16, 바로가기에서는 48로 또렷하게 보일 수 있습니다.
한 크기만 넣어도 동작은 합니다. 다만 16만 넣으면 큰 자리에서 흐려지고, 256만 넣으면 작은 자리에서 축소되며 가는 선이 뭉개집니다. 작은 크기는 별도로 만들어 넣어야 또렷합니다.
크기별로 어디에 쓰이나
| 크기 | 쓰이는 자리 | 넣을 곳 |
|---|---|---|
| 16×16 | 브라우저 탭, 주소창 | favicon.ico |
| 32×32 | 고해상도 화면의 탭, 즐겨찾기 목록 | favicon.ico |
| 48×48 | 윈도우 바탕화면 바로가기 | favicon.ico |
| 64·128·256 | 큰 아이콘 보기, 일부 확장 프로그램 | favicon.ico (선택) |
| 180×180 | 아이폰·아이패드 홈 화면 추가 | PNG + apple-touch-icon |
| 192×192 | 안드로이드 홈 화면 추가 | PNG + 웹 매니페스트 |
| 512×512 | PWA 설치 화면, 스플래시 | PNG + 웹 매니페스트 |
현실적인 최소 구성은 favicon.ico에 16·32·48 셋입니다. 모바일 홈 화면까지 챙기려면 여기에 180 PNG 하나를 더하면 대부분 끝납니다. PWA로 설치까지 시킬 계획이 있을 때만 192·512를 준비하면 됩니다.
16픽셀에서 살아남는 그림은 따로 있다
로고를 그대로 줄이면 16픽셀에서는 대개 뭉개진 얼룩이 됩니다. 가로로 긴 워드마크라면 더 그렇습니다. 파비콘은 로고의 축소판이 아니라 **그 브랜드를 16픽셀에서 알아보게 만드는 별도의 그림**이라고 보는 편이 맞습니다.
- 글자를 넣는다면 한 글자까지입니다. 두 글자부터는 붙어 보입니다.
- 가는 선은 사라집니다. 선 굵기를 과장해야 남습니다.
- 여백을 조금 남깁니다. 가장자리에 딱 붙으면 탭에서 잘려 보입니다.
- 배경은 투명하게 두는 편이 안전합니다. 브라우저 탭의 배경색은 다크 모드에서 바뀝니다.
그래서 만드는 순서
정사각형 PNG를 한 장 준비합니다. 256이나 512처럼 충분히 큰 크기로, 투명 배경으로 두는 것이 좋습니다. 그것을 ICO로 변환하면서 16·32·48을 함께 담고, 같은 원본에서 180 PNG를 하나 더 뽑으면 됩니다. 원본이 정사각형이 아니면 먼저 정사각으로 잘라야 합니다 — 파비콘 자리는 항상 정사각형이라 비율이 다르면 찌그러집니다.
브라우저는 `/favicon.ico`를 따로 지정하지 않아도 찾아갑니다. 그래서 사이트 최상위에 그 이름으로 올려 두는 것이 가장 간단합니다. 바꿨는데 그대로 보인다면 대개 캐시 때문이고, 강력 새로고침이나 시크릿 창으로 확인하면 됩니다.