워드프레스로 사이트를 만들었는데 브라우저 탭에 아이콘이 안 뜬다. 다른 사이트들은 탭마다 고유한 아이콘이 보이는데, 내 사이트만 회색 지구본이 달려 있다. 이 작은 아이콘이 파비콘(favicon)이고, 없으면 사이트가 미완성처럼 보인다.
파비콘이 필요한 이유
파비콘은 "favorite icon"의 줄임말로, 브라우저 탭, 즐겨찾기 목록, 모바일 홈 화면에 표시되는 웹사이트의 대표 아이콘이다. 크기는 작지만 영향은 크다.
- 탭 구분: 탭을 10개 이상 열어두면 제목이 잘린다. 이때 아이콘만으로 어떤 사이트인지 구분하게 된다.
- 브랜드 인식: 구글의 G, 유튜브의 빨간 재생 버튼처럼 파비콘 하나로 브랜드를 각인시킬 수 있다.
- 신뢰도: 파비콘 없는 사이트는 구글 검색결과에서도 기본 아이콘이 표시된다. 사소하지만 클릭률에 영향을 준다.
파비콘 사이즈별 용도
| 크기 | 파일명 예시 | 사용처 |
|---|---|---|
| 16x16 | favicon-16x16.png | 브라우저 탭, 주소창 |
| 32x32 | favicon-32x32.png | 즐겨찾기, 윈도우 작업표시줄 |
| 180x180 | apple-touch-icon.png | 아이폰 홈 화면 바로가기 |
| 192x192 | android-chrome-192x192.png | 안드로이드 홈 화면, PWA |
| 512x512 | android-chrome-512x512.png | PWA 스플래시 화면 |
하나만 만들면 안 되냐고 생각할 수 있지만, 브라우저와 OS마다 참조하는 크기가 다르다. 16x16 하나만 올려두면 모바일 홈 화면에서 픽셀이 깨져 보인다.
디자이너 없이 파비콘 만드는 법
로고가 이미 있다면 리사이즈하면 되지만, 로고 없이 시작하는 경우가 더 많다. 파비콘 생성기를 쓰면 텍스트 한두 글자나 이모지를 골라서 바로 파비콘 이미지를 뽑을 수 있다.
- 텍스트 모드를 선택하고 사이트 이름의 첫 글자를 입력한다. (예: "N", "가")
- 배경색과 글자색을 브랜드 컬러에 맞춰 지정한다.
- 모양을 고른다. 정사각형, 둥근 모서리, 원형 세 가지가 있는데, 최근 트렌드는 둥근 모서리다.
- 미리보기에서 브라우저 탭에 어떻게 보일지 확인한 뒤 다운로드한다.
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">주의 파비콘을 교체했는데 브라우저에 반영이 안 되는 경우가 있다. 브라우저가 이전 파비콘을 캐시하고 있어서 그렇다. Ctrl+Shift+R(강제 새로고침)을 하거나, 시크릿 모드에서 확인하면 바뀐 아이콘이 보인다.
16픽셀짜리 이미지에 너무 복잡한 디자인을 넣으면 식별이 안 된다. 글자 하나, 색상 하나, 단순한 도형 하나. 그 정도면 충분하다.