블로그를 만들었는데 브라우저 탭에 내 사이트만 기본 아이콘이 뜬다. 다른 사이트는 고유한 작은 그림이 있는데 내 것만 없으니 허전하다. 이 작은 아이콘을 파비콘(favicon)이라고 한다.
파비콘이란
파비콘(favorite icon)은 브라우저 탭, 북마크, 즐겨찾기에 표시되는 웹사이트 고유 아이콘이다. 보통 16×16px이나 32×32px 크기의 정사각형 이미지로, 사이트의 첫인상을 결정하는 요소 중 하나다.
파비콘이 없으면 브라우저 기본 아이콘(지구본이나 빈 문서)이 표시되어 사이트가 미완성처럼 보일 수 있다. 설정하는 데 5분도 안 걸리니 빠뜨리지 않는 게 좋다.
파비콘 크기별 용도
- 16×16: 브라우저 탭에 표시되는 기본 크기
- 32×32: 북마크바, 윈도우 즐겨찾기
- 64×64: 일부 브라우저의 고해상도 표시
- 192×192: 안드로이드 홈 화면 바로가기
- 512×512: iOS Apple Touch Icon (홈 화면 추가 시)
여러 크기를 한꺼번에 준비해 두면 어떤 기기에서든 깨지지 않고 표시된다.
만드는 순서
- 파비콘 생성기에 접속한다
- 텍스트(1~2글자) 또는 이모지를 선택한다. 사이트 이름 첫 글자를 넣는 게 일반적이다
- 배경색, 글자색, 모양(정사각형, 둥근 모서리, 원형)을 설정한다
- 미리보기에서 브라우저 탭에 어떻게 보이는지 확인한다
- 필요한 크기별 PNG 파일을 다운로드한다
TIP 파비콘은 아주 작은 크기로 보이기 때문에, 복잡한 이미지보다 단순한 글자나 도형이 훨씬 잘 보인다. 배경과 대비가 확실한 색상 조합을 고르는 게 좋다.
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="180x180" href="/apple-touch-icon.png">파일 경로는 실제 업로드 위치에 맞게 수정한다. 적용 후 브라우저 캐시 때문에 바로 안 보일 수 있는데, 강력 새로고침(Ctrl+Shift+R)을 하면 반영된다.