파비콘이란? — 규격·형식과 적용 방법
탭을 열 개쯤 열어 두면 사이트 제목은 다 가려지고 작은 아이콘만 남습니다. 그 아이콘이 파비콘입니다. 작아 보여도 브랜드를 다시 찾게 하는 표식이고, 검색 결과에도 노출됩니다. 어떤 크기·형식으로 만들고 어떻게 적용하는지 정리합니다.
파비콘이 하는 일
- 브라우저 탭·북마크: 수많은 탭 사이에서 내 사이트를 즉시 식별하게 합니다.
- 검색 결과: 구글 모바일 검색에는 사이트 이름 옆에 파비콘이 표시됩니다 — 없으면 기본 지구본 아이콘이 나와 밋밋해 보입니다.
- 홈 화면 바로가기: 휴대폰 홈 화면에 추가될 때 앱 아이콘처럼 쓰입니다.
- 신뢰감: 파비콘이 없는 사이트는 미완성처럼 보이기 쉽습니다.
필요한 크기 — 기본 4종 세트
| 크기 | 용도 | 지정 방법 |
|---|---|---|
| 16×16, 32×32 | 브라우저 탭·북마크 | rel="icon" |
| 180×180 | 아이폰 홈 화면 | rel="apple-touch-icon" |
| 192×192 | 안드로이드 홈 화면 | 웹 매니페스트 |
| 512×512 | PWA 설치·스플래시 | 웹 매니페스트 |
512px 이상의 정사각형 원본 하나를 만들어 두고 각 크기로 줄여 내보내는 것이 정석입니다. 생성 도구를 쓰면 한 번에 전 크기 세트가 나옵니다.
ICO vs PNG vs SVG
| ICO | PNG | SVG | |
|---|---|---|---|
| 호환성 | 구형까지 모두 | 현대 브라우저 전부 | 현대 브라우저 대부분 |
| 특징 | 여러 크기 한 파일 | 가장 무난한 기본값 | 벡터라 항상 선명, 다크모드 대응 가능 |
| 추천 | 루트에 favicon.ico 병행 | 기본 선택 | 로고가 단순한 도형·글자일 때 |
HTML에 적용하기 + 디자인 팁
<head>에 다음과 같이 선언합니다.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">- 단순하게: 16px에서는 글자 두 자, 도형 하나 정도만 살아남습니다. 로고 전체보다 이니셜·심볼만 쓰세요.
- 여백 적게: 캔버스를 꽉 채워야 작게 줄어도 잘 보입니다.
- 대비 확보: 밝은 탭·어두운 탭 양쪽에서 보이는지 확인하세요. 배경 원/사각형을 깔면 안전합니다.
- 캐시 주의: 파비콘을 바꿔도 브라우저가 옛것을 한참 보여줄 수 있습니다 — 강력 새로고침이나 파일명 변경으로 갱신됩니다.
파비콘(favicon, favorite icon)은 브라우저 탭·북마크·검색 결과·홈 화면 바로가기에 표시되는 사이트의 작은 아이콘입니다. 탭을 여러 개 열어 두면 제목은 가려지고 파비콘만 남기 때문에, 사용자가 내 사이트를 다시 찾는 시각적 표식이 됩니다. 구글 모바일 검색 결과에도 표시되어 브랜드 인지와 신뢰감에 영향을 줍니다.
실무 기본 세트는 4가지입니다. 16×16·32×32(브라우저 탭·북마크용 PNG 또는 ICO), 180×180(아이폰 홈 화면용 apple-touch-icon), 192×192와 512×512(안드로이드·PWA 매니페스트용)입니다. 원본을 512px 이상 정사각형으로 만들어 두고 각 크기로 줄여 내보내면 됩니다.
현대 브라우저는 PNG와 SVG를 모두 지원하므로 PNG가 무난한 기본값입니다. SVG는 어떤 크기에서도 선명하고 다크모드 대응까지 가능하지만 일부 구형 환경에서 무시됩니다. ICO는 여러 크기를 한 파일에 담는 전통 형식으로, 오래된 브라우저까지 호환하려면 favicon.ico를 루트에 함께 두는 것이 안전합니다.