웹사이트를 만들어서 배포했는데 브라우저 탭에 기본 아이콘(빈 문서 모양)이 뜬다. 파비콘을 설정하지 않았기 때문이다. 파비콘 하나만 넣어도 탭이 여러 개 열렸을 때 내 사이트를 금방 찾을 수 있다.
파비콘이란
파비콘(favicon)은 "favorite icon"의 줄임말이다. 브라우저 탭, 북마크, 검색 결과에서 사이트를 식별하는 작은 아이콘이다. 크기가 작아서 단순한 문자, 도형, 이모지가 잘 보인다.
파비콘 크기별 용도
| 크기 | 용도 |
|---|---|
| 16×16px | 브라우저 탭 (가장 기본) |
| 32×32px | 북마크바, 브라우저 툴바 |
| 48×48px | 윈도우 바탕화면 바로가기 |
| 180×180px | iOS 홈 화면 아이콘 (apple-touch-icon) |
| 192×192px | 안드로이드 홈 화면, PWA 아이콘 |
텍스트로 파비콘 만드는 순서
- 파비콘 생성기에 접속한다.
- 사이트 이름의 첫 글자(예: "B")나 이모지를 입력한다.
- 배경색, 글자색, 모양(정사각형/둥근 모서리/원형)을 선택한다.
- 미리보기를 확인하고, 원하는 크기의 PNG 파일을 다운로드한다.
TIP 파비콘은 작은 크기에서 보이는 게 중요하다. 복잡한 로고보다 글자 한 개나 단순한 도형이 16×16px에서 훨씬 잘 보인다. 브랜드 컬러를 배경에 깔고 흰색 글자를 올리면 깔끔하게 나온다.
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">ICO vs PNG, 어떤 형식을 써야 하나
- ICO: 여러 크기를 한 파일에 담을 수 있다. IE 구형 브라우저까지 지원해야 할 때 사용.
- PNG: 현재 모든 주요 브라우저가 지원한다. 크기별로 파일을 따로 관리할 수 있어서 더 유연하다.
2026년 기준으로 PNG를 쓰는 것이 주류다. 단, 루트에 favicon.ico를 하나 두면 별도 선언 없이도 브라우저가 자동으로 인식한다.
파비콘 없는 사이트는 미완성처럼 보인다. 설정하는 데 5분도 안 걸리니, 배포 전에 꼭 넣어두는 게 좋다.