포트폴리오 사이트를 배포했는데, 브라우저 탭에 아무 아이콘도 없이 흰 종이 모양만 보인다. 디자인 도구를 열어서 16x16 픽셀짜리 아이콘을 처음부터 그리자니 막막하다. 글자 하나나 이모지만으로도 충분히 괜찮은 파비콘을 만들 수 있다.
파비콘이 없으면 생기는 문제
파비콘(favicon)은 브라우저 탭, 북마크, 모바일 홈 화면에 표시되는 작은 아이콘이다. 없으면 기능상 문제는 없지만 두 가지가 불편하다.
- 탭을 여러 개 열었을 때 어떤 사이트인지 구분이 안 된다
- 서버 콘솔에
GET /favicon.ico 404에러가 반복적으로 찍힌다
브랜드 신뢰도 측면에서도 파비콘이 없는 사이트는 미완성으로 보일 수 있다.
필요한 사이즈
| 용도 | 크기 | 형식 |
|---|---|---|
| 브라우저 탭 | 16x16, 32x32 | ICO 또는 PNG |
| 안드로이드 홈 화면 | 192x192 | PNG |
| iOS 홈 화면 | 180x180 | PNG (apple-touch-icon) |
| PWA 스플래시 | 512x512 | PNG |
모든 사이즈를 하나씩 만들 필요는 없다. 큰 이미지 하나를 준비하면 브라우저가 알아서 축소해서 쓴다. 하지만 16x16에서 선명하게 보이려면 작은 사이즈도 따로 준비하는 게 좋다.
텍스트나 이모지로 만드는 법
파비콘 생성기에서 텍스트 모드를 선택하면 한두 글자를 입력해서 바로 아이콘이 만들어진다. 사이트 이름의 첫 글자("P", "블" 등)를 넣으면 심플하면서 식별이 쉽다. 이모지 모드로 전환하면 로켓, 코드, 커피 같은 이모지를 골라서 쓸 수도 있다.
배경색, 글자색, 도형(정사각형/둥근 모서리/원형)을 조합하면 브랜드 컬러에 맞출 수 있다. 설정을 바꿀 때마다 16x16부터 192x192까지 여러 사이즈의 미리보기가 동시에 갱신된다. 실제 브라우저 탭에서 어떻게 보이는지까지 시뮬레이션해주니까, 너무 작아서 안 보이는 디자인을 미리 걸러낼 수 있다.
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 파비콘을 교체한 뒤에도 이전 아이콘이 계속 보인다면 브라우저 캐시 문제다. Ctrl+Shift+R(하드 리로드)을 하거나, 파일명에 버전 번호를 붙이면(favicon-v2.png) 해결된다.
디자이너 없이도 글자 하나와 배경색 조합으로 충분히 깔끔한 파비콘을 만들 수 있다. 사이트 배포 전 마지막 체크리스트에 파비콘 설정을 넣어두면 깜빡하는 일이 없다.