크롬에서 탭을 10개 넘게 열어두면 사이트 이름은 안 보이고 아이콘만 남는다. 이때 파비콘이 없는 사이트는 지구본 모양 기본 아이콘으로 표시되는데, 탭이 많을수록 어떤 사이트인지 구분이 안 된다. 파비콘 하나 설정해두면 탭, 북마크, 검색 결과에서 시각적으로 바로 식별된다.
파비콘이 표시되는 곳
- 브라우저 탭 (가장 대표적)
- 북마크 목록
- 모바일 홈 화면 바로가기
- 구글 검색 결과 (사이트명 옆 아이콘)
- 브라우저 히스토리
구글은 2019년부터 모바일 검색 결과에 파비콘을 표시하기 시작했고, 현재는 PC 검색 결과에서도 노출된다. 파비콘이 없으면 기본 지구본 아이콘이 뜨는데, 전문성이 떨어져 보일 수 있다.
크기별 용도와 권장 사이즈
| 크기 | 용도 | 필수 여부 |
|---|---|---|
| 16x16 | 브라우저 탭 | 필수 |
| 32x32 | Windows 작업 표시줄, 북마크 | 필수 |
| 180x180 | Apple Touch Icon (iOS 홈 화면) | 권장 |
| 192x192 | Android Chrome 홈 화면 | 권장 |
| 512x512 | PWA 스플래시 화면 | PWA인 경우 필수 |
최소한 16x16과 32x32 두 가지는 반드시 준비해야 한다. 모바일까지 대응하려면 192x192 이상도 필요하다.
텍스트와 이모지로 파비콘 만들기
디자인 툴 없이도 파비콘을 만들 수 있다. 파비콘 생성기에서 타입을 "텍스트"로 선택하면 1~2글자를 아이콘으로 변환해준다. 사이트 이름 첫 글자를 넣는 방식이 가장 흔하다. 배경색, 글자색, 모양(정사각형, 둥근 모서리, 원형)을 조합하면 꽤 그럴듯한 아이콘이 나온다.
이모지 타입을 선택하면 그리드에서 원하는 이모지를 골라 바로 파비콘으로 만들 수 있다. 음식 블로그라면 접시 이모지, 개발 블로그라면 코드 이모지를 넣는 식이다. 미리보기에서 브라우저 탭에 어떻게 보이는지 바로 확인되니까 여러 조합을 시도해보면 된다.
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(강력 새로고침)을 하거나, 파일명 뒤에 ?v=2 같은 쿼리 파라미터를 붙이면 캐시를 우회할 수 있다.
16x16 픽셀짜리 이미지 하나지만, 없으면 눈에 띈다. 사이트를 운영한다면 가장 먼저 세팅해야 할 항목 중 하나다.