크롬 탭을 열면 사이트 이름 왼쪽에 작은 아이콘이 하나씩 붙어 있다. 구글은 G, 유튜브는 빨간 재생 버튼. 이게 파비콘(favicon)이다. 없으면 회색 지구본 아이콘이 뜨는데, 탭을 여러 개 열었을 때 어떤 사이트인지 구분이 안 된다.
파비콘에 필요한 크기
파비콘은 쓰이는 곳마다 요구 크기가 다르다.
| 크기 | 쓰이는 곳 |
|---|---|
| 16x16 | 브라우저 탭 |
| 32x32 | 북마크바, 윈도우 작업 표시줄 |
| 64x64 | 윈도우 사이트 바로가기 |
| 192x192 | 안드로이드 크롬 홈 화면 추가 |
| 512x512 | Apple Touch Icon (iOS 홈 화면) |
전부 따로 만들어야 하나 싶겠지만, 하나의 디자인을 크기별로 내보내주는 도구를 쓰면 한 번에 해결된다.
텍스트로 파비콘 만들기
파비콘 생성기에서 직접 만들어보겠다.
Step 1. 타입 선택
텍스트 모드와 이모지 모드 중 하나를 고른다. 텍스트 모드에서는 1~2글자를 입력할 수 있다. 브랜드 이니셜을 넣는 게 일반적이다. 예를 들어 "My Blog"라면 "M"이나 "MB"를 넣으면 된다.
Step 2. 디자인 조정
- 배경색 — 컬러 피커로 원하는 색을 고른다. 브랜드 컬러가 있으면 헥스 코드(#3B82F6 같은 형태)를 직접 입력할 수도 있다.
- 글자색 — 배경과 대비가 확실한 색을 골라야 16px 크기에서도 글자가 보인다. 어두운 배경에는 흰색, 밝은 배경에는 검정이 무난하다.
- 모양 — 정사각형, 둥근 모서리, 원형 세 가지 중 선택한다. 최근 트렌드는 둥근 모서리다.
- 폰트 크기 — 슬라이더로 글자 크기를 조절한다. 한 글자면 크게, 두 글자면 약간 줄이는 게 균형이 맞다.
Step 3. 미리보기 확인 후 다운로드
오른쪽 미리보기에서 결과를 확인한다. 16x16 크기에서 글자가 뭉개지지 않는지 눈으로 봐야 한다. 괜찮으면 필요한 크기를 골라 PNG로 다운로드한다.
이모지 파비콘도 가능하다
텍스트 대신 이모지를 파비콘으로 쓸 수 있다. 이모지 모드로 전환하면 A~Z, 0~9 등 36개의 이모지 그리드가 나온다. 토이 프로젝트나 개인 블로그에는 이모지 파비콘이 오히려 눈에 잘 띄기도 한다. 디자인에 시간 쓸 필요 없이 클릭 한 번이면 되니까 프로토타입 단계에서 특히 편하다.
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="512x512" href="/favicon-512x512.png">여러 크기를 등록해두면 브라우저가 상황에 맞는 크기를 자동으로 골라 쓴다. ICO 형식은 과거 IE 호환용이었고, 지금은 PNG면 모든 주요 브라우저에서 작동한다.
주의할 점 파비콘은 브라우저 캐시가 강하게 걸린다. 파비콘을 교체한 뒤에도 이전 아이콘이 계속 보인다면, 브라우저 캐시를 삭제하거나 파일명에 버전을 붙여서(favicon-v2.png) 캐시를 우회하면 된다.
포토샵이나 일러스트레이터 없어도 파비콘 하나 만드는 데는 30초면 충분하다. 회색 지구본 아이콘 그대로 두는 것보다 글자 하나라도 넣어두는 편이 사이트의 완성도가 올라간다.