웹사이트를 만들었는데 브라우저 탭에 기본 아이콘(지구본 모양)이 그대로 떠 있으면 어딘가 미완성처럼 보인다. 파비콘은 16x16 픽셀짜리 작은 이미지인데, 이게 있고 없고에 따라 사이트의 인상이 달라진다.
파비콘 크기별 용도
| 크기 | 용도 |
|---|---|
| 16x16 | 브라우저 탭, 즐겨찾기 바 |
| 32x32 | Windows 바탕화면 바로가기 |
| 64x64 | Windows 사이트 아이콘 |
| 192x192 | Android Chrome 홈 화면 |
| 512x512 | Apple Touch Icon (iOS 홈 화면) |
16x16 하나만 넣어도 브라우저 탭에는 정상 표시된다. 하지만 모바일에서 "홈 화면에 추가"했을 때 선명하게 나오려면 192x192 이상도 함께 등록해야 한다.
Step 1. 파비콘 디자인하기
파비콘 생성기에 접속하면 텍스트 또는 이모지 중 입력 방식을 고를 수 있다. 텍스트 모드에서는 1~2글자를 넣으면 되고(보통 사이트 이름의 이니셜), 배경색과 글자색을 각각 지정한다. 모양은 정사각형, 둥근 모서리, 원형 세 가지다. 브라우저 탭 미리보기가 바로 나오니까 실제로 어떻게 보일지 확인하면서 조정하면 된다.
Step 2. 크기 선택 후 다운로드
디자인이 정해지면 필요한 크기를 골라 PNG로 다운로드한다. 16x16, 32x32, 192x192 세 가지를 받아두면 대부분의 환경을 커버한다.
Step 3. 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">TIP 파비콘을 바꿨는데 브라우저에 이전 아이콘이 계속 보인다면 캐시 문제다.Ctrl+Shift+R(강력 새로고침)을 하거나, 파일명에 버전 번호를 붙여서(favicon-v2.png) 캐시를 우회할 수 있다.
디자인 팁
- 16px에서도 읽히려면 글자는 1개가 최선이다. 2글자 넘어가면 뭉개져 보인다
- 배경색은 사이트의 메인 컬러와 맞추면 브랜드 일관성이 생긴다
- 흰색 배경은 크롬 탭의 흰색과 섞여서 테두리가 없어 보일 수 있다. 약간의 색을 넣는 편이 낫다
파비콘 하나 설정하는 데 걸리는 시간은 5분이 채 안 된다. 작은 디테일이지만 사이트 완성도를 높이는 가장 쉬운 방법이다.