브라우저에서 탭을 여러 개 열어놓으면 각 탭에 작은 아이콘이 보인다. 이게 파비콘(favicon)이다. 파비콘이 설정되지 않은 사이트는 기본 아이콘이 나오는데, 북마크에서도 구분이 안 되고 사이트의 완성도가 낮아 보인다.
파비콘에 필요한 사이즈
단일 크기로 끝나지 않는다. 브라우저, 모바일 홈 화면, 검색 결과 등 쓰이는 곳에 따라 크기가 다르다.
| 크기 | 용도 |
|---|---|
| 16x16 | 브라우저 탭 (기본) |
| 32x32 | 브라우저 탭 (고해상도), 즐겨찾기 |
| 48x48 | Windows 바탕화면 바로가기 |
| 180x180 | iOS 홈 화면 (apple-touch-icon) |
| 192x192 | Android 홈 화면, PWA 아이콘 |
Step 1. 파비콘 디자인
로고가 있다면 로고를 축소해서 쓰는 게 가장 자연스럽다. 16px에서도 식별 가능하려면 단순한 형태여야 한다. 로고가 복잡하면 이니셜 한 글자만 따서 만드는 방법이 실용적이다.
파비콘 생성기에서 텍스트 한 글자(예: "B")나 이모지를 입력하면 바로 아이콘이 만들어진다. 배경색, 글자색, 모양(정사각형, 둥근 모서리, 원형), 글꼴 크기까지 조절할 수 있어서 디자인 도구 없이도 깔끔한 파비콘을 뽑을 수 있다.
Step 2. 파일 다운로드
16x16부터 192x192까지 필요한 사이즈를 선택해서 PNG로 다운로드한다. ICO 형식이 필요한 경우도 있는데, 최신 브라우저는 PNG를 지원하니 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(하드 새로고침)을 하거나, 파일명에 버전 번호를 붙여서(favicon-v2.png) 캐시를 우회할 수 있다.
파비콘은 작지만 사이트의 첫인상을 좌우하는 요소다. 5분이면 만들고 적용할 수 있으니, 아직 기본 아이콘 상태라면 지금 바꾸는 게 좋다.