웹사이트를 만들고 브라우저 탭을 보면 밋밋한 기본 아이콘이 떠 있다. 파비콘(favicon)을 설정하지 않으면 다른 탭 사이에서 내 사이트를 찾기 어렵고, 북마크에도 아이콘 없이 텍스트만 보인다.
파비콘 사이즈별 용도
| 크기 | 용도 |
|---|---|
| 16×16 | 브라우저 탭 아이콘 |
| 32×32 | 브라우저 북마크, Windows 작업표시줄 |
| 64×64 | Windows 사이트 바로가기 |
| 192×192 | Android Chrome 홈 화면 아이콘 |
| 512×512 | iOS 홈 화면(Apple Touch Icon), PWA 아이콘 |
16×16 하나만 넣어도 브라우저 탭에는 표시되지만, 모바일 홈 화면 추가나 PWA까지 고려하면 여러 사이즈를 준비해야 한다.
텍스트/이모지로 파비콘 만들기
포토샵이나 피그마 없이도 파비콘을 만들 수 있다. 파비콘 생성기에서 설정할 수 있는 항목은 다음과 같다.
- 타입 선택
- 텍스트(1~2글자) 또는 이모지 중 선택. 사이트 이름의 첫 글자를 넣거나, 서비스를 나타내는 이모지를 고르면 된다.
- 배경색/글자색
- 브랜드 컬러에 맞춰 설정. 16px 크기에서도 잘 보이려면 배경과 글자 간 명도 차이를 크게 주는 게 좋다.
- 모양
- 정사각형, 둥근 모서리, 원형 세 가지. 둥근 모서리가 가장 무난하다.
- 글꼴 크기
- 기본 48px 기준으로 조정. 글자가 잘리지 않도록 미리보기를 확인하면서 맞추면 된다.
설정을 바꿀 때마다 4가지 크기의 미리보기가 실시간으로 갱신되고, 브라우저 탭에서 어떻게 보이는지도 시뮬레이션으로 확인할 수 있다.
HTML에 파비콘 적용하기
<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">다운로드한 파일을 사이트 루트 디렉토리에 넣고, HTML <head> 안에 위 코드를 추가하면 된다. 워드프레스라면 테마 설정의 "사이트 아이콘" 항목에서 업로드만 하면 자동 적용된다.
16px 정사각형에 너무 복잡한 그래픽을 넣으면 뭉개져서 알아볼 수 없다. 단순한 글자 하나나 이모지가 작은 크기에서 오히려 잘 보인다.