웹사이트를 만들고 배포했는데 브라우저 탭에 기본 지구본 아이콘이 그대로 떠 있다. 이걸 바꾸려면 파비콘(favicon) 파일을 만들어서 사이트에 연결해야 한다. 포토샵이나 일러스트레이터가 없어도, 글자 하나 또는 이모지 하나면 충분하다.
파비콘이란
파비콘(favicon)은 "favorite icon"의 줄임말이다. 브라우저 탭, 북마크 목록, 모바일 홈 화면에 표시되는 작은 아이콘을 뜻한다. 16x16 픽셀이 기본이지만, 고해상도 화면과 다양한 기기를 지원하려면 여러 크기를 준비해야 한다.
필요한 사이즈
| 크기 | 용도 |
|---|---|
| 16x16 | 브라우저 탭 |
| 32x32 | 브라우저 탭 (고해상도) |
| 64x64 | Windows 사이트 아이콘 |
| 192x192 | Android Chrome |
| 512x512 | Apple Touch Icon, PWA |
텍스트/이모지로 파비콘 만드는 법
- 입력: 파비콘 생성기에서 표시할 텍스트(1~2글자)를 입력하거나, 이모지 목록에서 원하는 아이콘을 고른다. 서비스명 이니셜이나 브랜드와 어울리는 이모지가 적합하다.
- 스타일 설정: 배경색, 글자색을 지정하고 모양(정사각형, 둥근 모서리, 원형) 중 하나를 선택한다. 글꼴 크기도 조절할 수 있다.
- 미리보기 확인: 16px부터 192px까지 네 가지 크기의 미리보기와 브라우저 탭 시뮬레이션이 표시된다. 16px에서 글자가 뭉개지지 않는지 확인하는 게 중요하다.
- 다운로드: 원하는 크기의 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 16x16에서 글자 2개는 거의 안 보인다. 파비콘용 텍스트는 1글자가 가장 선명하다. 브랜드명이 긴 경우 첫 글자만 쓰거나 이모지를 활용하는 편이 낫다.
파비콘이 없으면 탭이 여러 개 열렸을 때 내 사이트를 찾기 어렵다. 1분이면 만들 수 있으니 사이트 배포 전에 꼭 챙기자.