워드프레스나 티스토리로 사이트를 만들었는데, 브라우저 탭에 아이콘이 없다. 기본 아이콘이 뜨거나 아예 빈칸으로 나온다. 사소해 보이지만, 즐겨찾기에 등록했을 때나 검색 결과에서 사이트 신뢰도에 영향을 준다. 로고 파일이 없어도 텍스트나 이모지로 간단하게 만들 수 있다.
파비콘이 필요한 이유
- 탭 구분 — 탭을 10개 이상 열어놓으면 제목이 잘려서 안 보인다. 아이콘이 유일한 식별 수단이 된다.
- 즐겨찾기/북마크 — 파비콘이 없으면 북마크바에서 기본 아이콘만 보여서 어떤 사이트인지 알기 어렵다.
- 검색 결과 노출 — 구글 모바일 검색에서 사이트명 옆에 파비콘이 표시된다. 있고 없고의 차이가 클릭률에 영향을 줄 수 있다.
- PWA 아이콘 — 모바일에서 홈 화면에 추가하면 파비콘이 앱 아이콘처럼 표시된다.
텍스트로 파비콘 만들기
파비콘 생성기에서 타입을 "텍스트"로 선택하고 글자 1~2개를 입력하면 된다. 사이트 이름의 첫 글자를 넣는 게 일반적이다.
커스터마이징 옵션
- 배경색 / 글자색
- 컬러 피커로 자유롭게 선택한다. 사이트의 브랜드 컬러에 맞추면 통일감이 생긴다.
- 모양
- 정사각형, 둥근 모서리, 원형 세 가지 중 선택. 요즘 트렌드는 둥근 모서리다.
- 글꼴 크기
- 슬라이더로 조절 가능. 한 글자면 크게, 두 글자면 살짝 줄이는 게 자연스럽다.
오른쪽 미리보기에서 16x16, 32x32, 64x64, 192x192 네 가지 크기로 어떻게 보이는지 바로 확인할 수 있다.
파비콘 크기별 용도
| 크기 | 용도 |
|---|---|
| 16x16 | 브라우저 탭 |
| 32x32 | 즐겨찾기, 작업표시줄 |
| 64x64 | Windows 사이트 바로가기 |
| 180x180 | Apple Touch Icon (iOS 홈 화면) |
| 192x192 | Android 홈 화면, PWA 아이콘 |
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 워드프레스는 관리자 패널 > 사이트 아이콘에서 이미지를 업로드하면 자동으로 적용된다. 코드를 직접 수정할 필요 없다.
파비콘 하나 바꾸는 데 5분이면 충분하다. 사이트를 처음 만들 때 놓치기 쉬운 부분인데, 한 번 설정해두면 브라우저 탭, 즐겨찾기, 검색 결과 어디서든 사이트를 알아볼 수 있게 된다.