브라우저 탭에 표시되는 작은 아이콘이 파비콘(favicon)이다. 구글, 네이버, 유튜브 탭을 보면 각각 고유한 아이콘이 있다. 이게 없으면 기본 지구본 아이콘이 나오는데, 탭이 여러 개 열려 있을 때 구분이 안 된다.
파비콘이 필요한 이유
- 탭 구분: 브라우저 탭이 10개 넘게 열려 있으면 사이트 이름은 안 보이고 아이콘만 보인다
- 즐겨찾기/북마크: 북마크 바에서 사이트를 아이콘으로 빠르게 찾을 수 있다
- 브랜드 인지: 검색 결과에서도 파비콘이 표시되는 경우가 있어서 클릭률에 영향을 준다
- 전문성: 파비콘이 없는 사이트는 미완성으로 보인다
파비콘 만드는 순서
- 파비콘 생성기에 접속한다
- 텍스트(1~2글자) 또는 이모지를 선택한다. 브랜드 이니셜을 넣는 게 일반적이다
- 배경색, 글자색을 브랜드 컬러에 맞춰 설정한다
- 모양(정사각형, 둥근 모서리, 원형)을 고른다
- 미리보기에서 16px, 32px, 192px 크기별로 확인한다
- 다운로드 버튼을 누르면 필요한 크기의 PNG 파일이 모두 받아진다
필요한 파비콘 크기
| 크기 | 용도 |
|---|---|
| 16×16px | 브라우저 탭 (가장 기본) |
| 32×32px | 윈도우 작업표시줄, 일부 브라우저 탭 |
| 180×180px | iOS Safari 홈 화면 (apple-touch-icon) |
| 192×192px | 안드로이드 Chrome 홈 화면 |
| 512×512px | PWA(프로그레시브 웹 앱) 스플래시 화면 |
HTML에 파비콘 적용하기
파비콘 파일을 사이트 루트에 올리고, <head> 안에 다음 코드를 추가한다.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">워드프레스, Wix 같은 빌더를 쓴다면 설정 메뉴에서 이미지를 업로드하면 자동으로 적용된다.
TIP 파비콘은 매우 작은 크기로 표시되기 때문에 복잡한 이미지보다 단순한 글자나 도형이 낫다. 로고를 그대로 넣으면 16px에서 뭉개져 보일 수 있다. 로고의 핵심 요소(이니셜, 심볼) 한 가지만 추출해서 쓰는 게 가독성이 좋다.
사이트를 만들 때 파비콘은 마지막에 까먹기 쉬운 항목이다. 글자 하나만 넣어도 되니 5분이면 끝나는 작업이다.