블로그를 만들고 브라우저 탭을 보니, 다른 사이트들은 저마다 작은 아이콘이 있는데 내 사이트만 회색 지구본 아이콘이 떠 있다. 이 작은 아이콘이 파비콘(favicon)이다. 없어도 사이트가 작동하는 데 문제는 없지만, 탭이 여러 개 열려 있을 때 내 사이트를 한눈에 구별할 수 없다.
파비콘이 필요한 이유
- 브라우저 탭 식별: 탭이 10개쯤 열려 있으면 제목이 잘려서 안 보인다. 아이콘이 유일한 구별 수단이다
- 북마크 목록: 즐겨찾기에 저장했을 때 아이콘이 함께 표시된다
- 모바일 홈 화면: 스마트폰에서 사이트를 홈 화면에 추가하면 파비콘이 앱 아이콘처럼 쓰인다
- 검색 결과: 구글 모바일 검색에서 사이트 이름 옆에 파비콘이 노출된다
플랫폼별 필요한 크기
| 크기 | 용도 |
|---|---|
| 16×16 px | 브라우저 탭, 주소창 |
| 32×32 px | 브라우저 북마크, 윈도우 작업 표시줄 |
| 192×192 px | 안드로이드 크롬 홈 화면 아이콘 |
| 512×512 px | PWA 스플래시 화면, 고해상도 디스플레이 |
하나만 만들면 브라우저가 알아서 리사이즈하긴 하지만, 크기별로 최적화된 이미지를 따로 제공하는 게 선명하게 나온다.
파비콘을 만드는 방법
로고 이미지가 있으면 그걸 정사각형으로 잘라서 쓰면 되지만, 로고가 없거나 아직 정하지 못했을 때는 텍스트 기반 파비콘이 빠르다. 사이트 이름의 첫 글자 한두 자를 넣고, 배경색과 글자색을 브랜드 컬러에 맞추면 그럴듯한 아이콘이 나온다.
파비콘 생성기에서 텍스트 1~2글자를 입력하고, 모양(정사각형, 둥근 모서리, 원형)과 색상을 고르면 16×16부터 512×512까지 크기별 PNG 파일을 바로 다운로드할 수 있다. 브라우저 탭에서 어떻게 보이는지 미리보기도 제공된다.
HTML에 적용하는 코드
다운로드한 파비콘 파일을 사이트 루트 디렉토리에 올리고, 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="192x192" href="/favicon-192x192.png">워드프레스나 티스토리 같은 블로그 플랫폼은 관리자 설정에서 파비콘 이미지를 업로드하면 코드가 자동으로 삽입된다. HTML을 직접 수정할 필요가 없다.
파비콘은 한 번 설정하면 바꿀 일이 거의 없다. 5분이면 만들 수 있으니, 사이트를 공개하기 전에 챙겨두자.