사이트를 만들고 브라우저 탭을 보니 기본 아이콘이 그대로 박혀 있다. 디자이너에게 맡길 만한 규모도 아니고, 포토샵으로 16×16 픽셀을 찍는 건 배보다 배꼽이 크다. 글자 하나만 넣어도 그럴듯한 파비콘이 나온다.
파비콘이 필요한 이유
- 브라우저 탭 식별: 탭을 여러 개 열었을 때 어떤 사이트인지 아이콘으로 구분한다
- 북마크/즐겨찾기: 저장된 사이트 목록에서 시각적으로 눈에 띈다
- 모바일 홈 화면: "홈 화면에 추가"했을 때 표시되는 앱 아이콘 역할
- 검색 결과: 구글 모바일 검색에서 사이트명 옆에 파비콘이 표시된다
- 신뢰감: 기본 아이콘 그대로인 사이트보다 완성도 있어 보인다
파비콘 사이즈 가이드
| 크기 | 용도 |
|---|---|
| 16×16 | 브라우저 탭, 가장 기본 |
| 32×32 | 윈도우 작업 표시줄, 일부 브라우저 |
| 180×180 | iOS 홈 화면 아이콘 (apple-touch-icon) |
| 192×192 | Android 홈 화면 아이콘 (PWA) |
| 512×512 | PWA 스플래시 화면 |
한 가지 크기만 만들면 브라우저가 알아서 축소/확대하지만, 각 크기별로 최적화된 이미지를 따로 제공하는 게 가장 선명하다.
텍스트로 파비콘 만들기
파비콘 생성기에서 과정이 단순하다.
- 텍스트 모드를 선택하고, 글자 1~2자를 입력한다 (브랜드 이니셜이 일반적)
- 배경색과 글자색을 지정한다. 컬러 피커로 브랜드 컬러를 정확히 맞출 수 있다
- 모양을 정사각형, 둥근 모서리, 원형 중에서 고른다
- 우측 미리보기에서 16px부터 192px까지 4가지 크기로 결과를 확인한다
- 사이즈별 PNG 파일을 다운로드한다
이모지 모드도 있어서 알파벳이나 숫자 이모지를 선택해 파비콘으로 쓸 수 있다. HTML 삽입 코드까지 자동으로 생성해주니 복사해서 <head> 안에 붙여넣으면 끝이다.
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">파일을 사이트 루트 디렉토리에 올리고 위 코드를 <head>에 넣으면 된다. 대부분의 브라우저는 루트에 있는 favicon.ico도 자동으로 찾는다.
TIP 파비콘이 안 바뀌면 브라우저 캐시 때문이다. Ctrl+Shift+R로 강력 새로고침하거나, 시크릿 모드에서 확인해보면 된다.
자주 묻는 질문
ICO 파일과 PNG 파일 중 뭘 써야 하나요?
현대 브라우저는 PNG를 모두 지원한다. ICO는 여러 크기를 하나의 파일에 담을 수 있다는 장점이 있지만, 각 크기별 PNG를 별도로 지정하는 방식이 더 일반적이다.
SVG 파비콘도 가능한가요?
Chrome, Firefox, Edge 등 최신 브라우저에서 SVG 파비콘을 지원한다. <link rel="icon" type="image/svg+xml" href="/favicon.svg">로 지정할 수 있다. 벡터라 어떤 크기에서도 선명하다는 장점이 있다.
워드프레스에서 파비콘을 바꾸려면?
워드프레스 관리자 메뉴 외모 > 사용자 정의하기 > 사이트 아이덴티티에서 "사이트 아이콘" 항목으로 업로드하면 된다. 512×512 이상 이미지를 권장한다.
파비콘 하나로 사이트 전체 인상이 달라진다. 글자 한 자와 색상만 정하면 30초 안에 완성되니, 기본 아이콘을 그대로 두고 있을 이유가 없다.