파비콘 크기, 왜 하나가 아니라 여러 개나 필요할까
파비콘은 브라우저 탭 옆에 붙는 작은 아이콘으로, MDN의 정의에 따르면 선호된 그림(favorite graphics)의 줄임말인 'Favorite Icon'에서 유래했다. 1999년 인터넷 익스플로러 5.0이 웹서버 루트의 favicon.ico 파일을 자동으로 불러오면서 처음 등장했다. 당시엔 16×16 픽셀 하나면 충분했지만 지금은 사정이 다르다.
스마트폰 홈 화면, 레티나 디스플레이, PWA 스플래시 화면, Windows 작업 표시줄, 구글 검색 결과 화면까지 파비콘이 등장하는 자리가 늘었다. 요구되는 해상도도 여러 갈래로 나뉜 상태다. 정답이 되는 크기 하나를 찾는 것보다, 플랫폼별로 필요한 사이즈를 세트로 준비하는 쪽이 지금의 표준에 가깝다.
이 글은 실무에서 자주 쓰이는 파비콘 사이즈 15가지를 용도별로 정리하고, 왜 이렇게 여러 개가 필요한지, 어떤 원리로 만들어지는지 설명한다.
파비콘 사이즈는 어떤 원리로 나뉘어 있나
왜 크기 하나로 통일하지 못하나
브라우저, 모바일 OS, PWA 규격이 서로 다른 화면 배율과 표시 밀도를 쓰기 때문이다. 같은 아이콘이라도 저해상도 화면에서 16px로 표시될 자리가 있고, 레티나 아이폰 홈 화면에서 180px로 확대돼 보일 자리가 있다. 이미지 하나를 억지로 늘리면 경계가 뭉개진다. 플랫폼마다 최적 크기의 원본을 따로 준비해야 하는 이유다.
파비콘은 실제로 어떻게 만들어지나
원본 이미지를 512×512 같은 큰 캔버스에 먼저 그린 뒤, 필요한 크기로 단계적으로 축소하는 방식이 일반적이다. 한 번에 16px까지 줄이면 곡선이 계단처럼 깨진다. 50%씩 여러 단계에 걸쳐 축소하는 슈퍼샘플링 방식을 쓰면 작은 크기에서도 테두리가 매끄럽게 유지된다. 파비콘 생성기는 이 축소 과정과 ICO 인코딩을 브라우저 안에서 처리해서, 이미지를 서버에 올리지 않고도 결과물을 바로 내려받게 해준다.
표준 파비콘 사이즈 15가지, 어디에 쓰이나
아래 표는 실무에서 자주 요구되는 파비콘·아이콘 사이즈를 용도별로 정리했다. 사이트 성격에 따라 전부 다 만들 필요는 없다. 데스크톱·모바일·PWA 중 지원하려는 범위에 맞춰 고르면 된다.
| 사이즈 | 주요 용도 |
|---|---|
| 16×16 | 브라우저 탭, 주소창 (가장 기본형) |
| 32×32 | 브라우저 탭(레티나), 데스크톱 바로가기 아이콘 |
| 48×48 | Windows 사이트 아이콘, ICO 파일 내장용 |
| 57×57 | 구형 아이폰 홈 화면 아이콘 |
| 60×60 | 아이폰 홈 화면(구형 레티나) |
| 70×70 | Windows 타일(소형) |
| 72×72 | 구형 아이패드 홈 화면 아이콘 |
| 76×76 | 아이패드 홈 화면 아이콘 |
| 96×96 | 데스크톱 고해상도 파비콘, 바로가기 아이콘 |
| 120×120 | 아이폰 홈 화면(레티나) |
| 144×144 | Windows 타일(중형), 구형 안드로이드 |
| 152×152 | 아이패드 홈 화면(레티나) |
| 167×167 | 아이패드 프로 홈 화면 |
| 180×180 | 최신 아이폰·아이패드 홈 화면(apple-touch-icon 표준) |
| 192×192 | 안드로이드 PWA 매니페스트 아이콘 |
이 표에는 넣지 않았지만 512×512는 PWA 스플래시 화면이나 마스터 원본용으로 따로 챙겨두는 경우가 많다. 실제로 몇 개까지 준비할지는 사이트가 모바일 홈 화면 저장을 얼마나 지원할지, PWA로 만들 계획이 있는지에 따라 달라진다.
파비콘 크기가 왜 브랜드와 검색 노출에 영향을 주나
파비콘이 깨지면 무슨 일이 생기나
탭이 여러 개 열려 있을 때 사용자는 아이콘만 보고 사이트를 구분한다. 사이즈가 안 맞는 파비콘을 억지로 늘려 쓰면 흐릿하게 보이거나 일부 브라우저에서 아예 표시되지 않는다. 북마크나 검색 결과에서도 신뢰도가 떨어지는 것처럼 보이는 이유다.
구글 검색 결과에는 왜 파비콘이 등장하나
구글은 데스크톱 검색 결과 옆에 사이트의 파비콘을 함께 보여준다. MDN의 웹 앱 매니페스트 문서에서 제시하는 아이콘 규격처럼 이때도 일정 크기 이상의 정사각형 이미지를 요구하기 때문에, 너무 작은 파비콘만 등록돼 있으면 검색 결과에서 아이콘이 흐리게 나오거나 아예 빠질 수 있다. 파비콘 크기가 단순한 디자인 디테일을 넘어 검색 노출 방식에도 관여한다.
모바일에서는 왜 더 신경 써야 하나
사용자가 웹사이트를 스마트폰 홈 화면에 추가하면 그 순간부터 파비콘은 앱 아이콘과 같은 자리를 차지한다. 실제 앱 스토어 아이콘들과 나란히 놓이기 때문에, 해상도가 낮으면 사이트의 신뢰도를 깎아 먹는 요소가 된다.
직접 만들어보고 확인하는 방법
- 정사각형 원본 이미지를 하나 준비한다.
- 파비콘(Favicon) 생성기 페이지에 이미지를 업로드한다.
- 도구가 512px 마스터 캔버스를 기준으로 필요한 사이즈들을 자동으로 계산해 만들어준다.
- 생성된 favicon.ico, PNG, 매니페스트 파일을 내려받아 사이트 루트나 지정된 경로에 올린다.
- 실제 브라우저 탭과 모바일 홈 화면 추가 화면에서 각각 확인해 깨지는 부분이 없는지 점검한다.
이 과정은 회원가입이나 결제 없이 횟수 제한 없이 반복해서 쓸 수 있다. 로고를 바꿀 때마다 다시 만들어 비교해봐도 부담이 없다.
파비콘과 헷갈리기 쉬운 개념들
파비콘과 앱 아이콘은 뭐가 다른가
앱 아이콘은 앱 스토어에 등록되는 네이티브 앱의 아이콘이고, 파비콘은 웹사이트에 속한 아이콘이다. PWA 환경에서는 파비콘이 매니페스트 파일에 등록되면서 사실상 앱 아이콘과 같은 역할을 겸하게 된다.
파비콘과 애플 터치 아이콘은 같은 건가
애플 터치 아이콘(apple-touch-icon)은 파비콘의 하위 개념으로, 아이폰·아이패드에서 홈 화면에 추가할 때만 쓰이는 별도 규격이다. 일반 favicon.ico와 달리 배경이 투명하면 안 되고 불투명한 정사각형이어야 한다.
파비콘과 OG 이미지는 왜 헷갈리나
둘 다 링크가 공유될 때 함께 보이는 이미지라 혼동하기 쉽지만 쓰임새는 다르다. 파비콘은 브라우저 탭이나 홈 화면처럼 작은 자리에 반복적으로 노출되는 아이콘이고, OG(Open Graph) 이미지는 SNS나 메신저에서 링크를 공유할 때 크게 보여주는 썸네일이다.