웹사이트를 새로 만들거나 손볼 때 파비콘은 늘 마지막에 밀리는 작업입니다. 브라우저 탭 한구석에 들어가는 작은 아이콘이라 별것 아닌 듯 보이지만, 막상 손대 보면 파일 종류만 예닐곱 개에 크기도 제각각이라 어디까지 만들어야 하는지부터 막막해집니다. 요즘 환경에서는 그렇게까지 갖추지 않아도 됩니다.
예전에는 16픽셀부터 여러 크기의 PNG와 ICO를 한 세트로 묶어 넣었습니다. 지금은 SVG 한 장이 해상도 문제를 거의 해결합니다. 여기에 폴백용 파일 두세 개만 더하면 네이버, 구글, iOS, 안드로이드까지 대부분 잡힙니다.
실제로 필요한 파일은 네 개
다크모드까지 대응하는 SVG를 메인으로 쓰고, 나머지는 특정 환경을 위한 폴백입니다. 파일별로 맡는 역할이 다릅니다.
| 파일 | 형식/크기 | 역할 |
|---|---|---|
| favicon.svg | 벡터 (무제한) | 메인 아이콘, 다크모드 대응 |
| favicon.ico | 16px + 32px (2레이어) | 네이버 크롤러, 구형 브라우저 폴백 |
| apple-touch-icon.png | 180×180px | iOS 홈 화면 추가 아이콘 |
| favicon-192.png | 192×192px (선택) | 구글 검색 아이콘 최적화 |
HTML도 길지 않습니다. 브라우저가 SVG를 지원하면 SVG를 쓰고, 못 읽으면 ICO로 내려갑니다. <head> 안에 아래 네 줄을 넣습니다.
<!-- 1. SVG (메인, 다크모드 대응) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- 2. ICO (폴백, 네이버 크롤러와 구형 브라우저용) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- 3. iOS 홈 화면 추가 아이콘 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 4. 구글 검색 노출용 PNG (선택) -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">두 번째 줄의 sizes="any"는 브라우저가 SVG 대신 ICO를 먼저 집어 드는 현상을 막습니다. 네 번째 줄은 필수가 아니라 구글 검색 노출용 권장 항목입니다.
환경마다 집어 드는 파일이 다릅니다
같은 파비콘이라도 어디서 보느냐에 따라 실제로 쓰이는 파일이 갈립니다.
| 환경 | 사용 파일 | 비고 |
|---|---|---|
| 크롬, 엣지, 파이어폭스 (최신) | favicon.svg | SVG 완전 지원 |
| 사파리 (최신) | favicon.svg | SVG 지원 |
| iOS 홈 화면 | apple-touch-icon.png | 홈 화면 추가 시 |
| 네이버 검색 크롤러 | favicon.ico | 루트의 /favicon.ico를 직접 요청 |
| 구글 검색 | PNG(192px) 또는 SVG | 48px 배수 권장 |
| 구형 브라우저 | favicon.ico | ICO 폴백 |
네이버는 따로 챙겨야 합니다
네이버 검색 크롤러는 link 태그를 보기보다 도메인 루트의 /favicon.ico 파일을 직접 요청하는 경우가 많습니다. ICO 파일은 HTML에 선언하는 것과 별개로 사이트 루트 경로에 실제 파일로 올려 둡니다. 이걸 놓치면 다른 곳에서는 멀쩡히 보이는데 네이버 검색에서만 아이콘이 빕니다.
구글 검색을 신경 쓴다면 PNG 한 장
ICO는 여러 크기의 이미지를 하나로 묶는 컨테이너 포맷이라, 보통 16픽셀과 32픽셀 두 장을 담습니다. 구글은 검색 결과 아이콘으로 48픽셀의 배수(48, 96, 144, 192)를 권장합니다. ICO만으로는 32픽셀까지밖에 못 담으니 구글 기준에는 살짝 모자랍니다. 두 가지로 보완합니다.
- SVG를 그대로 씁니다. 벡터라 크기 제약이 없습니다.
- 192픽셀 PNG를 따로 더합니다. ICO에 48픽셀 레이어를 넣을 수도 있지만 파일이 무거워지니, PNG 한 장이 더 깔끔합니다.
다크모드는 SVG 안에서 처리합니다
SVG는 해상도뿐 아니라 다크모드 전환까지 한 파일에서 끝냅니다. SVG 안에 CSS 미디어쿼리(prefers-color-scheme)를 넣으면 사용자의 시스템 설정에 따라 색이 자동으로 바뀝니다. 흰 배경에 검은 아이콘이 다크모드에서는 검은 배경에 흰 아이콘으로 뒤집히는 식입니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.bg { fill: #ffffff; }
.icon { fill: #000000; }
@media (prefers-color-scheme: dark) {
.bg { fill: #000000; }
.icon { fill: #ffffff; }
}
</style>
<rect class="bg" width="32" height="32"/>
<path class="icon" d="..."/>
</svg>일부 구형 사파리나 인앱 브라우저는 SVG 내부 미디어쿼리를 못 읽습니다. 라이트 모드 색을 기본값으로 명확히 두면 미디어쿼리가 안 먹는 환경에서도 무난하게 보입니다.
파비콘은 브라우저가 강하게 캐싱합니다. 교체해도 한동안 옛 아이콘이 그대로 보일 수 있는데, 반영이 안 되면 파일 경로 뒤에 ?v=2 같은 쿼리를 붙이거나 강력 새로고침으로 확인합니다.
만드는 순서
제작 자체는 어렵지 않습니다. 단계별로 정리하면 이렇습니다.
- 원본 SVG 제작. 피그마나 일러스트레이터에서 정사각형으로 만듭니다. 작업 크기는 500픽셀이나 1000픽셀로 잡고, 가장자리 10%는 여백(safe zone)으로 비워 둡니다. 아이콘이 탭 안에서 잘리는 걸 막기 위해서입니다.
- PNG 추출. SVG에서 16, 32, 180, 192픽셀 PNG를 내보냅니다.
- ICO 변환. 16픽셀과 32픽셀 PNG 두 장을 ICO로 묶습니다.
- apple-touch-icon 제작. 180픽셀 PNG로 만듭니다.
시간이 없다면 realfavicongenerator.net에 SVG를 한 번 올리는 방법이 가장 빠릅니다. ICO와 apple-touch-icon을 자동으로 만들어 주고, 192픽셀 PNG도 함께 내보냅니다.
apple-touch-icon에서는 두 가지를 자주 놓칩니다. 둥근 모서리는 직접 넣지 않습니다. iOS가 알아서 둥글게 깎습니다. 그리고 배경은 반드시 채웁니다. 투명하게 두면 iOS가 검은색으로 메웁니다.
정리하며
파비콘은 디자인 요소이면서 동시에 검색엔진이 사이트를 인식하는 통로입니다. SVG를 메인으로 두고 ICO를 루트에 올리면, 브라우저 탭부터 네이버와 구글 검색 결과까지 같은 아이콘이 일관되게 이어집니다.
신규 프로젝트라면 SVG를 기본 파비콘으로 삼는 쪽을 권합니다. 다만 운영 중인 사이트는 주 유입 경로가 어디인지, 네이버 검색 비중이 높은지에 따라 ICO 배치에 더 신경 써야 할 수도 있습니다. 우리 사이트가 어느 쪽에서 더 많이 보이는지 따져 보고 우선순위를 정하면 됩니다.
