웹사이트를 만들어 놓고 브라우저 탭을 보면 기본 아이콘이 덩그러니 있다. 이 작은 아이콘 하나가 사이트의 첫인상을 좌우하는데, 포토샵을 열 필요까지는 없다. 글자 하나만 넣으면 그럴듯한 파비콘이 나온다.
파비콘이란
파비콘(Favicon)은 Favorite + Icon의 합성어다. 브라우저 탭, 북마크 목록, 검색 결과에서 사이트 이름 옆에 표시되는 아이콘이다. 크기는 작지만 사이트 인지도와 신뢰감에 영향을 준다.
파비콘 크기별 용도
| 크기 | 파일명 | 용도 |
|---|---|---|
| 16x16 | favicon-16x16.png | 브라우저 탭 |
| 32x32 | favicon-32x32.png | 북마크, 탭(고해상도) |
| 180x180 | apple-touch-icon.png | iOS 홈 화면 아이콘 |
| 192x192 | android-chrome-192x192.png | Android 홈 화면 아이콘 |
| 512x512 | apple-touch-icon.png | PWA 스플래시 화면 |
여러 크기를 준비해야 하는 이유는 브라우저와 기기마다 참조하는 파일이 다르기 때문이다.
파비콘 만드는 과정
- 파비콘 생성기에서 텍스트 또는 이모지 타입을 선택한다
- 브랜드 이니셜(예: "C") 또는 이모지를 입력한다
- 배경색과 글자색을 브랜드 컬러에 맞춰 설정한다
- 모양을 정사각형, 둥근 모서리, 원형 중에서 고른다
- 미리보기로 16x16부터 192x192까지 실제 크기를 확인한다
- 다운로드 버튼을 누르면 여러 크기의 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 파비콘을 바꿨는데 브라우저에 이전 아이콘이 계속 보인다면 캐시 문제다. Ctrl+Shift+R로 강력 새로고침하거나, 파일명에 버전 번호를 붙여서(예: favicon-v2.png) 캐시를 우회할 수 있다.
로고 디자인을 의뢰하기 전이라면 이니셜 한 글자로 파비콘을 먼저 만들어두자. 사이트 완성도가 확 달라 보인다.