사이트를 배포했는데 브라우저 탭에 기본 지구본 아이콘만 덩그러니 떠 있다. 북마크에 저장해도 다른 사이트와 구분이 안 된다. 파비콘(favicon)이 없어서 생기는 문제다. 포토샵을 열지 않아도 글자 하나, 이모지 하나로 충분히 만들 수 있다.
파비콘이란
파비콘은 favorite + icon의 합성어로, 브라우저 탭, 북마크 목록, 모바일 홈 화면 바로가기에 표시되는 작은 아이콘이다. 크기는 16x16px부터 192x192px까지 다양하고, 보통 여러 사이즈를 한꺼번에 준비한다.
| 크기 | 용도 |
|---|---|
| 16x16 | 브라우저 탭, 주소창 |
| 32x32 | 윈도우 바탕화면 바로가기 |
| 180x180 | iOS 홈 화면(apple-touch-icon) |
| 192x192 | 안드로이드 홈 화면, PWA 아이콘 |
디자인 툴 없이 파비콘 만드는 법
로고가 아직 없는 초기 프로젝트라면 텍스트 기반 파비콘이 현실적이다. 사이트 이름의 첫 글자를 넣거나, 서비스 성격에 맞는 이모지를 골라 쓰면 된다.
- 배경색을 브랜드 컬러에 맞춰 설정한다. 탭에서 눈에 띄려면 채도가 있는 색이 좋다
- 텍스트 모드에서 글자를 입력하거나, 이모지 모드에서 아이콘을 선택한다
- 모양을 정한다. 정사각형, 둥근 모서리, 원형 중 선택할 수 있다. 안드로이드는 원형, iOS는 둥근 모서리가 자연스럽다
- 필요한 사이즈를 골라 PNG 또는 ICO로 다운로드한다
이 과정을 파비콘 생성기에서 하면 미리보기를 보면서 색상, 크기, 모양을 바로바로 바꿀 수 있어서 시행착오가 줄어든다.
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">
TIP 파비콘을 교체했는데 브라우저에 이전 아이콘이 계속 보인다면 캐시 문제다. Ctrl+Shift+R(강력 새로고침)을 하거나 파일명 뒤에 ?v=2 같은 버전 파라미터를 붙이면 즉시 반영된다.
파비콘 하나로 사이트의 인상이 달라진다. 5분이면 만들 수 있으니 배포 전에 빠뜨리지 말자.