사이트를 배포하고 나서 브라우저 탭을 보면 회색 지구본 아이콘이 떡하니 박혀 있다. 기능은 다 돌아가는데, 이 아이콘 하나 때문에 어딘가 허술해 보인다. 파비콘(favicon)은 브라우저 탭, 즐겨찾기 목록, 모바일 홈 화면 바로가기에 표시되는 작은 아이콘이다. 16x16 픽셀짜리 이미지 하나지만, 사이트 인상을 꽤 좌우한다.
사이즈별 용도 정리
예전에는 16x16 하나면 충분했다. 지금은 기기와 브라우저마다 요구하는 크기가 다르다.
| 사이즈 | 용도 |
|---|---|
| 16×16 | 브라우저 탭 기본 아이콘 |
| 32×32 | 즐겨찾기, 고해상도 탭 표시 |
| 48×48 | Windows 바로가기 아이콘 |
| 192×192 | Android Chrome 홈 화면 아이콘 |
16x16 하나만 등록하면 모바일에서 흐릿하게 뜨거나 아예 빠진다. 최소 16x16, 32x32 두 개는 준비하고, 모바일 홈 화면까지 신경 쓸 거라면 192x192도 필요하다.
포토샵 없이 만드는 방법
로고 파일이 없어도 괜찮다. 파비콘 생성기에 텍스트 한두 글자나 이모지를 넣으면 바로 결과물이 나온다.
- 텍스트 또는 이모지 타입을 선택한다
- 글자를 입력하거나 이모지를 고른다
- 배경색과 글자색을 컬러 피커로 맞춘다
- 모양을 정사각형, 둥근 모서리, 원형 중에 고른다
- 미리보기를 확인하고 필요한 사이즈별 PNG를 다운로드한다
모양 선택 기준
정사각형이 가장 무난하지만, 최근에는 둥근 모서리를 쓰는 사이트가 많다. 원형은 SNS 프로필 느낌이 나서 세련되 보이지만, 16x16처럼 극단적으로 작은 사이즈에서 글자가 잘릴 수 있다. 미리보기에서 16px 크기까지 꼭 확인해봐야 한다.
TIP 글꼴 크기 슬라이더로 텍스트 비율을 조절할 수 있다. 글자 하나만 넣을 때는 크게, 두 글자를 넣을 때는 줄여야 잘리지 않는다. 실시간 미리보기에 바로 반영되니 슬라이더를 움직여가며 맞추면 된다.
HTML에 적용하는 코드
다운로드한 PNG 파일을 사이트 루트 폴더에 넣고, <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="/android-chrome-192x192.png">적용 후 브라우저 탭을 새로고침하면 아이콘이 바뀐다. 캐시 때문에 바로 안 보일 수 있는데, Ctrl+Shift+R(강력 새로고침)을 한 번 눌러주면 된다.
파비콘 하나 넣는 데 5분이면 충분하다. 디자인 감각이 없더라도 글자 하나에 색 두 가지만 정하면 제법 쓸 만한 결과가 나온다.