브라우저 탭을 10개쯤 열어놓으면 탭 제목이 잘려서 어떤 사이트인지 구분이 안 된다. 이때 눈으로 찾게 되는 게 작은 아이콘, 파비콘이다. 파비콘이 없는 사이트는 기본 지구본 아이콘이 뜨는데, 여러 탭 사이에서 찾기 어렵고 전문성이 떨어져 보인다.
파비콘이란
파비콘(Favicon)은 "Favorites Icon"의 줄임말이다. 브라우저 탭, 북마크 목록, 모바일 홈 화면 바로가기에 표시되는 16×16~192×192px 크기의 작은 아이콘이다.
- 브라우저 탭: 사이트 제목 왼쪽에 표시
- 북마크: 즐겨찾기 목록에서 사이트를 시각적으로 구분
- 검색 결과: 구글 모바일 검색에서 사이트명 옆에 노출
- 홈 화면 바로가기: 스마트폰에서 웹앱을 추가하면 앱 아이콘처럼 표시
파비콘 만드는 법
로고가 이미 있다면 이미지를 리사이즈해서 쓸 수 있지만, 로고가 없거나 텍스트 기반 파비콘을 빠르게 만들고 싶다면 생성 도구가 편하다.
파비콘 생성기에서 텍스트(1~2글자)나 이모지를 입력하고, 배경색과 글자색을 고르면 파비콘이 실시간으로 미리보기에 나타난다. 모양은 정사각형, 둥근 모서리, 원형 중에서 선택할 수 있고, 글꼴 크기도 슬라이더로 조절된다.
추천 설정
| 용도 | 텍스트 | 배경 | 모양 |
|---|---|---|---|
| 개인 블로그 | 이름 이니셜 (예: JK) | 브랜드 컬러 | 원형 |
| 쇼핑몰 | 상호 첫 글자 | 로고 배경색 | 둥근 모서리 |
| 포트폴리오 | 이모지 활용 | 깔끔한 단색 | 정사각형 |
파비콘 사이즈별 용도
- 16×16px
- 브라우저 탭에 표시되는 가장 작은 크기. 필수.
- 32×32px
- 북마크바, 새 탭 페이지에서 사용. 필수.
- 180×180px
- iOS Safari에서 홈 화면에 추가할 때 사용 (apple-touch-icon).
- 192×192px
- 안드로이드 크롬에서 홈 화면 바로가기 아이콘으로 사용.
웹사이트에 적용하는 법
다운로드한 파비콘 파일을 웹사이트 루트 디렉토리에 올리고, 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로 강력 새로고침을 하면 된다.
16px짜리 아이콘 하나가 사이트의 첫인상을 좌우한다. 만드는 데 1분도 안 걸리니까, 기본 지구본 아이콘을 그대로 두고 있을 이유가 없다.