웹사이트를 하나 만들었는데, 브라우저 탭에 기본 지구본 아이콘이 그대로 뜬다. 파비콘을 설정하지 않아서다. 작은 아이콘 하나지만, 탭을 여러 개 열어놓았을 때 내 사이트를 구분하는 유일한 시각적 단서가 된다.
파비콘이 필요한 이유
- 탭 구분: 크롬에서 탭 20개를 열면 제목이 잘린다. 아이콘만 보고 사이트를 찾게 된다.
- 즐겨찾기/북마크: 저장된 사이트 목록에서 아이콘이 없으면 기본 아이콘으로 표시된다.
- 모바일 홈 화면: 스마트폰에서 "홈 화면에 추가"를 하면 파비콘이 앱 아이콘처럼 사용된다.
- 검색 결과: 구글 검색 결과에 파비콘이 사이트명 옆에 표시된다.
파비콘 사이즈 규격
파비콘은 여러 크기를 준비해야 한다. 브라우저, 운영체제, 기기마다 사용하는 크기가 다르기 때문이다.
| 크기 | 용도 |
|---|---|
| 16×16 | 브라우저 탭 |
| 32×32 | 브라우저 즐겨찾기, 탭(고해상도) |
| 180×180 | iOS Safari 홈 화면 |
| 192×192 | Android Chrome 홈 화면 |
| 512×512 | PWA 스플래시 화면 |
디자인 툴 없이 파비콘 만들기
파비콘 생성기에서 텍스트 1~2글자 또는 이모지를 선택하고, 배경색과 글자색, 모양(정사각형, 둥근 모서리, 원형)을 지정하면 16px부터 192px까지 크기별 파비콘이 한 번에 생성된다. 미리보기에서 실제 브라우저 탭에 어떻게 보이는지 바로 확인할 수 있어서, 색상이나 크기를 조절하기 편하다.
TIP 16×16은 극도로 작은 크기다. 복잡한 로고보다는 브랜드 이니셜 1~2자로 만드는 게 가독성이 훨씬 좋다. 구글, 페이스북, 트위터 모두 파비콘에 이니셜을 쓴다.
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">파비콘은 한 번 만들어 놓으면 바꿀 일이 거의 없다. 5분 투자로 사이트의 첫인상이 달라진다.