워드프레스 블로그를 세팅하고 나서 브라우저 탭을 보면 회색 지구본 아이콘이 떡하니 박혀 있다. 기본 아이콘 그대로 두면 북마크에서도, 모바일 홈 화면에서도 어떤 사이트인지 구분이 안 된다. 파비콘 하나만 넣어도 사이트의 완성도가 달라 보인다.
파비콘이란
파비콘(Favicon)은 "Favorite + Icon"의 줄임말이다. 브라우저 탭, 즐겨찾기, 검색 결과, 모바일 홈 화면 바로가기에 표시되는 작은 아이콘을 가리킨다. 크기가 16×16px부터 512×512px까지 다양한데, 하나의 디자인을 여러 크기로 만들어 놓으면 브라우저가 상황에 맞는 것을 자동으로 골라 쓴다.
크기별 쓰임새
| 크기 | 용도 |
|---|---|
| 16×16 | 브라우저 탭, 주소창 |
| 32×32 | 즐겨찾기, 바로가기 |
| 192×192 | 안드로이드 크롬 홈 화면 |
| 512×512 | PWA 스플래시 화면, Apple Touch Icon |
디자인 도구 없이 만드는 법
포토샵이나 피그마 없이도 괜찮다. 파비콘 생성기를 열고 아래 순서를 따라가면 된다.
- 텍스트 모드에서 사이트 이니셜 1~2글자를 입력한다. 블로그 이름이 "Dev Log"라면 "DL"을 넣으면 된다
- 배경색을 사이트 메인 컬러에 맞추고, 글자색은 대비가 확실하게 설정한다
- 모양을 정사각형, 둥근 모서리, 원형 중에 고른다. 요즘은 둥근 모서리가 대세다
- 미리보기에서 브라우저 탭에 어떻게 보이는지 확인한다
- 16×16, 32×32, 192×192 크기를 각각 다운로드한다
TIP 이니셜 대신 이모지를 쓰면 더 빠르다. 커피숍 블로그라면 커피 이모지, 기술 블로그라면 코드 이모지를 선택하면 별도 디자인 없이도 캐릭터가 생긴다.
사이트에 적용하기
다운로드한 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="192x192" href="/favicon-192x192.png">워드프레스라면 코드를 만질 필요도 없다. 관리자 페이지 > 외모 > 사이트 아이덴티티에서 "사이트 아이콘"에 512×512 이미지를 업로드하면 자동으로 여러 크기가 생성된다.
잘 만든 파비콘의 조건
- 단순함: 16px에서도 알아볼 수 있어야 하므로 디테일이 많으면 안 된다. 글자 1~2개 또는 심볼 하나가 적당하다
- 대비: 배경과 전경의 색상 차이가 뚜렷해야 작은 크기에서도 식별된다
- 일관성: 사이트 로고나 브랜드 컬러와 통일감이 있어야 사용자가 탭 여러 개 사이에서 바로 찾는다
파비콘은 사이트의 명함 같은 존재다. 한 번 만들어 놓으면 바꿀 일이 거의 없으니, 처음에 사이트 색상과 어울리는 것으로 깔끔하게 만들어 두면 오래 쓸 수 있다.