웹사이트를 만들어 놓고 파비콘을 빼먹으면 브라우저 탭에 기본 지구본 아이콘이 뜬다. 사소해 보이지만 방문자가 탭을 여러 개 띄워놓으면 내 사이트를 구분하기 어려워진다.
파비콘에 필요한 사이즈
| 사이즈 | 용도 |
|---|---|
| 16x16 | 브라우저 탭, 주소창 |
| 32x32 | 브라우저 탭 (고해상도), 북마크바 |
| 48x48 | Windows 바탕화면 바로가기 |
| 180x180 | iOS 홈 화면(apple-touch-icon) |
| 192x192 | Android 홈 화면, PWA 아이콘 |
최소한 32x32 하나만 있어도 대부분의 브라우저에서 작동한다. 하지만 모바일 홈 화면 추가까지 고려하면 180x180 이상도 준비하는 게 좋다.
ICO vs PNG, 어떤 형식을 쓸까
ICO는 하나의 파일 안에 여러 크기의 아이콘을 담을 수 있는 전통적인 형식이다. 오래된 브라우저까지 지원해야 하면 ICO가 안전하다. PNG는 더 가볍고 투명 배경이 깔끔하게 나온다. 최신 브라우저는 PNG 파비콘을 모두 지원하므로, 요즘 새로 만드는 사이트에서는 PNG를 쓰는 경우가 더 많다.
파비콘 만드는 3단계
Step 1. 디자인 결정
16px 크기에서도 알아볼 수 있어야 한다. 복잡한 이미지보다 글자 하나, 이모지, 단순한 도형이 효과적이다. 브랜드 이니셜을 쓰는 경우가 가장 흔하다.
Step 2. 파일 생성
파비콘 생성기에서 텍스트나 이모지를 입력하고 배경색, 글자색, 모양(사각/원형/둥근 모서리)을 설정하면 미리보기가 바로 나온다. 16x16부터 192x192까지 필요한 사이즈를 선택해서 다운로드하면 된다.
Step 3. HTML에 적용
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">HTML의 <head> 안에 위 코드를 넣고, 파비콘 파일을 사이트 루트 디렉토리에 올리면 끝이다.
TIP 파비콘을 교체했는데 브라우저에서 이전 아이콘이 계속 보인다면 캐시 문제다.Ctrl+Shift+R(강력 새로고침)을 하거나, 파일명에 버전 번호를 붙이면(favicon-v2.png) 캐시를 우회할 수 있다.
파비콘 하나 추가하는 데 걸리는 시간은 5분도 안 된다. 사소한 디테일이지만 사이트의 완성도가 달라 보인다.