웹사이트를 만들고 배포했는데 브라우저 탭에 기본 아이콘만 덩그러니 떠 있다. 파비콘 하나 없으면 북마크 목록에서도 다른 사이트와 구분이 안 되고, 어딘가 덜 완성된 느낌이 든다. 그렇다고 포토샵을 열어서 16×16 픽셀짜리 아이콘을 만들자니 배보다 배꼽이 크다.
파비콘 만드는 3가지 방법 비교
| 방법 | 장점 | 단점 |
|---|---|---|
| 디자인 툴 (포토샵, 피그마) | 완전한 자유도 | 16px에 디테일 넣기 어려움, 시간 소요 |
| 이미지 변환 (기존 로고 축소) | 브랜드 일관성 유지 | 작은 크기에서 뭉개질 수 있음 |
| 텍스트/이모지 기반 생성기 | 30초면 완성, 디자인 스킬 불필요 | 복잡한 로고 표현 불가 |
개인 블로그나 사이드 프로젝트라면 세 번째 방법이 가성비가 가장 좋다. 이니셜 한 글자만 넣어도 탭에서 바로 구분되니까 충분하다.
텍스트로 파비콘 만들기
파비콘 생성기에서 글자 1~2자를 입력하면 미리보기가 바로 나온다. 배경색, 글자색을 컬러 피커로 고르고, 모양을 정사각형, 둥근 모서리, 원형 중에 선택한다. 글꼴 크기도 슬라이더로 조절할 수 있어서 글자가 잘리지 않게 맞출 수 있다.
이모지 탭으로 전환하면 A~Z, 0~9 문자 프리셋이 있다. 배경에 브랜드 컬러를 깔고 흰색 이니셜을 올리면 꽤 그럴듯한 파비콘이 나온다.
파비콘 크기별 용도
- 16×16px
- 브라우저 탭에 표시되는 기본 크기. 가장 흔하게 쓰인다.
- 32×32px
- 윈도우 작업표줄 바로가기, 브라우저 북마크에 사용.
- 192×192px
- 안드로이드 크롬에서 홈 화면에 추가할 때 쓰는 크기.
- 512×512px (apple-touch-icon)
- iOS 사파리에서 홈 화면에 추가할 때 필요한 크기.
HTML에 적용하는 법
다운로드한 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">생성기에서 이 코드를 같이 제공해주니까 복사해서 붙여넣기만 하면 된다. 캐시 때문에 바로 안 바뀔 수 있는데, 브라우저 캐시를 지우거나 Ctrl+Shift+R로 강제 새로고침하면 반영된다.