개인 블로그를 만들었는데 브라우저 탭에 아이콘이 없다. 기본 지구본 아이콘이 그대로 뜨니까 북마크 목록에서도 다른 사이트와 구분이 안 된다. 이 작은 아이콘이 파비콘(favicon)이고, 직접 만들어 넣는 데 5분이면 된다.
파비콘이 뭔지부터
파비콘은 "favorites icon"의 줄임말이다. 브라우저 탭, 북마크 목록, 모바일 홈 화면 바로가기에 표시되는 작은 아이콘을 말한다. 크기는 16x16px부터 512x512px까지 용도에 따라 다르다.
- 16x16: 브라우저 탭에 표시되는 기본 크기
- 32x32: 고해상도 브라우저 탭, 윈도우 단축키
- 192x192: 안드로이드 홈 화면 아이콘
- 512x512: iOS 홈 화면, PWA 아이콘
Step 1. 파비콘 디자인
파비콘 생성기에 접속하면 텍스트 입력란이 보인다. 1~2글자를 넣으면 그 글자가 파비콘으로 만들어진다. 블로그 이름의 첫 글자를 넣는 게 가장 흔한 방법이다.
이모지를 쓸 수도 있다. 요리 블로그라면 요리 관련 이모지, 기술 블로그라면 코드 관련 이모지를 고르면 별도 디자인 작업 없이도 개성 있는 아이콘이 나온다.
Step 2. 색상과 모양 조정
배경색과 글자색을 컬러 피커로 지정한다. 사이트 메인 컬러와 맞추면 통일감이 생긴다. 모양은 세 가지 중 고른다.
| 모양 | 특징 | 어울리는 스타일 |
|---|---|---|
| 정사각형 | 가장 기본적인 형태 | 기업, 공식 사이트 |
| 둥근 모서리 | 부드러운 인상 | 블로그, 서비스 |
| 원형 | 프로필 느낌 | 개인 브랜드, 포트폴리오 |
미리보기 영역에서 브라우저 탭에 실제로 어떻게 보이는지 바로 확인할 수 있다.
Step 3. 다운로드 및 HTML 적용
완성된 파비콘은 16x16부터 512x512까지 여러 크기를 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="180x180" href="/apple-touch-icon.png">TIP 파비콘을 바꿨는데 브라우저에 반영이 안 되면 캐시 문제다. Ctrl+Shift+R(하드 리프레시)을 하거나, 파일명 뒤에 ?v=2 같은 버전 파라미터를 붙이면 즉시 반영된다.
디자이너 없이도 글자 하나, 이모지 하나로 파비콘은 충분히 만들 수 있다. 사이트 신뢰도와 브랜드 인식에 은근히 영향을 주는 부분이니 빈칸으로 두지 말고 채워넣자.