브라우저 탭에 지구본 모양 기본 아이콘이 뜨는 사이트는 아직 개발 중이거나 세팅을 덜 한 느낌을 준다. 파비콘 하나 넣는 데 5분도 안 걸리는데, 사이트의 첫인상을 바꾸는 효과는 생각보다 크다.
파비콘이 필요한 이유
- 브라우저 탭 식별: 탭이 여러 개 열려 있을 때 아이콘으로 사이트를 구분한다
- 즐겨찾기/북마크: 즐겨찾기 목록에서 아이콘이 없으면 빈 칸으로 나온다
- 모바일 홈 화면: 사이트를 홈 화면에 추가하면 파비콘이 앱 아이콘처럼 표시된다
- 검색 결과: 구글 검색 결과에서 사이트명 옆에 파비콘이 나온다
파비콘 사이즈 기준
| 크기 | 용도 |
|---|---|
| 16×16 | 브라우저 탭 (기본) |
| 32×32 | 윈도우 작업표시줄, 일부 브라우저 |
| 180×180 | Apple 기기 홈 화면 (apple-touch-icon) |
| 192×192 | Android 크롬 홈 화면 |
모든 환경을 커버하려면 여러 크기를 준비해야 하지만, 하나의 이미지에서 자동으로 리사이즈해주는 도구를 쓰면 일일이 만들 필요가 없다.
Step 1. 텍스트 또는 이모지 선택
파비콘 생성기에서 텍스트 모드를 선택하면 1~2글자를 넣어 파비콘을 만들 수 있다. 사이트 이름의 첫 글자(예: "C", "가")를 넣는 게 일반적이다. 이모지 모드로 전환하면 미리 제공되는 이모지 중 하나를 골라 쓸 수 있다.
Step 2. 디자인 조정
배경색과 글자색을 브랜드 컬러에 맞춰 변경하고, 모양을 정사각형/둥근 모서리/원형 중 고른다. 실시간 미리보기에서 16px, 32px, 192px 크기가 동시에 나오니 각 크기에서 어떻게 보이는지 바로 확인할 수 있다.
Step 3. 다운로드 및 HTML 적용
필요한 크기별 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(강력 새로고침)을 하거나, 파일명에 버전 번호를 붙여 캐시를 우회하면 된다.