브라우저 탭에 작게 보이는 아이콘, 즐겨찾기 목록에서 사이트 옆에 붙는 작은 이미지. 이게 파비콘(favicon)이다. 없어도 사이트가 작동하는 데 문제는 없지만, 파비콘이 없으면 기본 아이콘(빈 문서 모양)이 표시되어 전문성이 떨어져 보인다.
파비콘이란
"favorite icon"의 줄임말이다. 웹사이트를 시각적으로 식별하는 가장 작은 브랜딩 요소다. 다음과 같은 곳에 표시된다.
- 브라우저 탭
- 즐겨찾기/북마크 목록
- 모바일 홈 화면에 추가했을 때
- 구글 검색결과 (사이트명 옆)
- 브라우저 히스토리
파비콘 크기와 형식
| 크기 | 용도 | 형식 |
|---|---|---|
| 16×16px | 브라우저 탭 | ICO, PNG |
| 32×32px | 즐겨찾기, 윈도우 작업 표시줄 | ICO, PNG |
| 48×48px | Windows 사이트 아이콘 | ICO |
| 180×180px | iOS 홈 화면 (Apple Touch Icon) | PNG |
| 192×192px | Android 홈 화면, PWA | PNG |
ICO 파일은 여러 크기를 하나의 파일에 담을 수 있어서 전통적으로 사용되어 왔지만, 최신 브라우저는 PNG도 완벽하게 지원한다.
Step 1. 파비콘 디자인
16px 크기에서도 식별 가능해야 하기 때문에 복잡한 디자인은 피해야 한다. 효과적인 파비콘의 조건은 세 가지다.
- 단순할 것: 글자 1~2개 또는 단순한 아이콘
- 대비가 클 것: 배경색과 전경색의 명도 차이가 커야 작은 크기에서도 보인다
- 브랜드와 연결될 것: 사이트 이름의 첫 글자나 로고의 핵심 요소를 사용
Step 2. 생성하기
파비콘 생성기에서 텍스트(글자 1~2개) 또는 이모지를 입력하고, 배경색, 글자색, 모양(정사각형, 둥근 모서리, 원형)을 설정하면 파비콘이 바로 만들어진다. 16×16부터 192×192까지 다양한 크기를 한 번에 다운로드할 수 있다.
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 파비콘 파일 이름을 favicon.ico로 해서 루트 디렉토리에 넣으면, <link> 태그 없이도 대부분의 브라우저가 자동으로 인식한다. 하지만 Apple Touch Icon 등은 별도로 지정해야 한다.
파비콘이 안 바뀔 때
파비콘을 교체했는데 브라우저에 이전 이미지가 계속 표시되는 경우가 있다. 브라우저 캐시 때문이다.
- 강제 새로고침: Ctrl+Shift+R (Windows) 또는 Cmd+Shift+R (Mac)
- 캐시 삭제: 브라우저 설정에서 캐시된 이미지 삭제
- 쿼리 스트링: href에
?v=2같은 버전 파라미터를 추가하면 캐시를 무시한다
파비콘 하나가 사이트의 첫인상을 좌우한다. 탭 20개를 열어놓고 작업할 때 파비콘이 있는 사이트는 한눈에 찾을 수 있고, 없는 사이트는 탭 제목을 일일이 읽어야 한다.