웹사이트를 만들고 나서 브라우저 탭을 보면 기본 아이콘(지구본이나 빈 문서)이 떠 있다. 파비콘(favicon)을 설정하지 않아서다. 사소해 보이지만, 탭을 여러 개 열어놓았을 때 사이트를 구별하는 핵심 요소이고, 북마크에도 이 아이콘이 들어간다.
파비콘에 필요한 사이즈
| 크기 | 용도 |
|---|---|
| 16x16 | 브라우저 탭 (기본) |
| 32x32 | 브라우저 탭 (고해상도), 북마크 |
| 180x180 | Apple Touch Icon (iOS 홈 화면) |
| 192x192 | Android Chrome, PWA 아이콘 |
| 512x512 | PWA 스플래시 화면 |
16x16 하나만 있어도 브라우저 탭에는 표시되지만, 모바일까지 대응하려면 여러 크기를 준비하는 게 좋다.
파비콘을 만드는 3가지 방법
1. 이미지 편집 프로그램
포토샵이나 피그마에서 32x32 캔버스에 직접 그린다. 자유도는 높지만 작은 크기에서 디테일을 살리기 어렵고, ICO 포맷으로 변환하는 별도 작업이 필요하다.
2. 이미지 파일 변환
기존 로고 이미지를 32x32로 리사이즈한 뒤 PNG로 저장한다. 로고가 복잡하면 16px에서 뭉개져서 알아보기 힘들 수 있다. 단순한 심볼이나 이니셜이 작은 크기에서 잘 보인다.
3. 텍스트/이모지로 즉석 생성
파비콘 생성기에서 글자 1~2자나 이모지를 선택하고, 배경색과 모양(정사각형, 원형, 둥근 모서리)을 지정하면 파비콘이 바로 만들어진다. 브라우저 탭 미리보기로 실제 적용 모습도 확인할 수 있고, 16x16부터 192x192까지 필요한 크기별로 PNG를 다운로드할 수 있다.
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)을 하거나, 파일명 뒤에 ?v=2 같은 쿼리스트링을 붙이면 캐시를 우회할 수 있다.
파비콘은 한 번 설정하면 거의 바꿀 일이 없다. 그만큼 처음에 제대로 만들어두는 게 낫다. 로고가 아직 없는 사이트라면 이니셜 한 글자로 시작해도 기본 아이콘보다 훨씬 낫다.