직접 만든 웹사이트를 브라우저에서 열어봤더니 탭에 기본 아이콘(빈 문서 모양)이 떠 있다. 이 자리에 들어가는 게 파비콘(favicon)이다. 없다고 사이트가 안 돌아가는 건 아니지만, 있고 없고가 완성도 차이를 만든다.
파비콘이 필요한 곳
- 브라우저 탭 — 여러 탭을 열어두면 아이콘으로 사이트를 구분한다
- 즐겨찾기/북마크 — 저장된 사이트 목록에서 시각적으로 식별된다
- 모바일 홈 화면 — "홈 화면에 추가" 시 앱 아이콘처럼 표시된다
- 검색 결과 — 구글 검색결과 옆에 파비콘이 함께 나온다
파비콘 크기 규격
| 크기 | 용도 |
|---|---|
| 16x16px | 브라우저 탭, 즐겨찾기 |
| 32x32px | 기본 파비콘, Windows 바로가기 |
| 180x180px | Apple Touch Icon (iOS) |
| 192x192px | Android, PWA 아이콘 |
모든 크기를 한 번에 준비하는 게 이상적이다. 한 크기만 넣으면 브라우저가 자동 리사이즈하는데, 작은 아이콘으로 축소될 때 깨져 보일 수 있다.
Step 1. 파비콘 디자인
파비콘 생성기에서 텍스트 또는 이모지 중 원하는 타입을 선택한다. 텍스트는 1~2글자가 적당하다(예: 브랜드 이니셜). 배경색, 글자색, 모양(정사각형, 둥근 모서리, 원형)을 설정하면 4가지 크기의 미리보기가 동시에 생성된다.
Step 2. 다운로드
미리보기에서 결과를 확인한 뒤 PNG 파일로 다운로드한다. 필요한 크기별로 개별 다운로드가 가능하다.
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="180x180" href="/apple-touch-icon.png">TIP 파비콘이 브라우저에 바로 반영되지 않으면 캐시 때문이다. Ctrl+Shift+R(강력 새로고침)을 눌러보면 된다.
16픽셀짜리 아이콘 하나가 사이트의 첫인상을 좌우한다. 디자이너가 없어도 이니셜 하나만 넣으면 기본 아이콘보다는 훨씬 낫다.