브라우저 탭에 표시되는 작은 아이콘을 파비콘(favicon)이라고 합니다. 홈페이지를 운영한다면 파비콘은 필수입니다. 브랜드 인지도를 높이고, 여러 탭 중에서 내 사이트를 쉽게 찾을 수 있게 해줍니다.
파비콘이란?
favorite icon의 줄임말로, 웹사이트를 대표하는 작은 아이콘입니다. 브라우저 탭, 북마크, 모바일 홈 화면 바로가기 등에 표시됩니다. 보통 16×16 또는 32×32 픽셀의 작은 크기입니다.
파비콘이 없으면?
파비콘을 설정하지 않으면 브라우저 기본 아이콘(지구본이나 문서 모양)이 표시됩니다. 전문성이 떨어져 보이고, 사용자가 탭을 구별하기 어렵습니다. 404 에러 로그에 favicon.ico 요청 실패가 쌓이기도 합니다.
필요한 파비콘 크기
- 16×16: 브라우저 탭, 주소창
- 32×32: 윈도우 작업표시줄
- 180×180: Apple 터치 아이콘
- 192×192: Android 크롬 홈 화면
- 512×512: PWA 스플래시 화면
파비콘 만드는 방법
로고를 작게 줄이면 디테일이 뭉개집니다. 파비콘용으로 단순화한 버전을 따로 만드는 게 좋습니다. 파비콘 생성기를 사용하면 이미지를 업로드해서 여러 크기로 한번에 변환할 수 있습니다.
HTML에 적용하기
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">ICO vs PNG
전통적으로 .ico 파일을 사용했지만, 현대 브라우저는 PNG도 지원합니다. ICO는 여러 크기를 하나의 파일에 담을 수 있다는 장점이 있습니다. 온라인 파비콘 메이커에서 두 형식 모두 생성 가능합니다.
파비콘 업데이트 시 주의
파비콘은 브라우저에 강하게 캐시됩니다. 변경 후에도 이전 아이콘이 보인다면 캐시를 삭제하거나, 파일명에 버전을 추가하세요(favicon.ico?v=2). 파비콘 제작 도구로 새로 만든 뒤 확실하게 교체하면 됩니다.