웹사이트를 만들었는데 브라우저 탭에 아이콘이 없다. 기본 지구본 모양이나 빈 아이콘이 뜨면 사이트가 미완성처럼 보인다. 파비콘(favicon)은 사이트의 첫인상을 결정하는 작은 요소인데, 만드는 데 5분도 안 걸린다.
파비콘이 뭔가
파비콘(favicon)은 "favorites icon"의 줄임말로, 브라우저 탭, 북마크, 스마트폰 홈 화면에 표시되는 사이트 아이콘이다. 구글 검색 결과에서도 사이트 이름 옆에 파비콘이 나타난다.
필요한 크기와 형식
| 크기 | 용도 |
|---|---|
| 16×16px | 브라우저 탭 |
| 32×32px | 윈도우 작업 표시줄, 북마크 |
| 180×180px | iOS 홈 화면 아이콘 (apple-touch-icon) |
| 192×192px | 안드로이드 크롬 홈 화면 |
하나의 디자인을 여러 크기로 만들어서 HTML에 등록하면 기기별로 적합한 크기가 자동으로 선택된다.
Step 1. 디자인 만들기
파비콘 생성기에서 텍스트 또는 이모지 중 원하는 타입을 선택한다. 텍스트 모드에서는 사이트 이름의 첫 글자를 넣는 게 일반적이다. 배경색, 글자색을 브랜드 컬러에 맞추고, 모양을 정사각형, 둥근 모서리, 원형 중에서 고른다. 미리보기에서 실제 탭 모양도 확인할 수 있다.
Step 2. 다운로드
16×16, 32×32, 192×192 등 필요한 크기를 각각 PNG로 다운로드한다.
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 파비콘을 바꿨는데 브라우저에 반영이 안 되면 캐시 문제다. Ctrl+Shift+R로 강력 새로고침을 하거나, 파일명 뒤에 쿼리스트링(?v=2)을 붙여서 캐시를 우회할 수 있다.
16픽셀짜리 아이콘이지만, 있고 없고의 차이가 크다. 사이트를 만들면 파비콘은 마지막이 아니라 처음에 세팅하는 게 좋다.