웹사이트를 만들다 보면 브라우저 탭에 표시될 작은 아이콘이 필요해집니다. 이때 대부분 파비콘 사이트를 검색하게 되는데, 검색 결과에 나오는 도구들이 워낙 많다 보니 어떤 걸 써야 할지 판단하기 어렵습니다. 단순히 이미지를 ICO로 바꿔주기만 하는 곳도 있고, 브라우저별 규격을 전부 뽑아주는 곳도 있습니다. 이 둘의 차이를 모르고 작업하면 나중에 아이폰 홈 화면에서 아이콘이 깨지거나, 구형 브라우저 탭에서 아무것도 안 보이는 상황을 겪게 됩니다.
파비콘 사이트를 고르는 5가지 기준
도구를 고를 때 봐야 할 핵심 항목은 다음과 같습니다. 하나씩 확인해보면 자신에게 맞는 곳을 빠르게 추릴 수 있습니다.
- 다중 사이즈 출력 여부: 16x16 하나만 뽑아주는 곳은 실무에서 부족합니다. 최소한 16, 32, 180, 192, 512픽셀은 한 번에 나와야 합니다.
- ICO 멀티 레이어 지원: ICO 포맷은 하나의 파일 안에 여러 해상도를 담을 수 있습니다. 이걸 지원하지 않고 단일 해상도만 넣어주는 도구는 확대 표시 환경에서 흐리게 보입니다.
- manifest 파일 생성: 안드로이드 크롬에서 홈 화면에 추가할 때 필요한 site.webmanifest를 같이 만들어주는지 확인합니다.
- 업로드 없이 브라우저에서 처리하는지: 로고 이미지를 서버에 업로드하지 않고 브라우저 내부에서 변환하는 방식이면 미공개 디자인을 다룰 때 안전합니다.
- 투명 배경 유지: PNG의 알파 채널이 검은색이나 흰색으로 채워져 버리는 도구가 의외로 많습니다.
크기별 규격 정리
파비콘은 하나가 아니라 용도별로 여러 개를 준비하는 게 표준입니다. 어디에 쓰이는지 알면 불필요한 파일을 줄일 수 있습니다.
| 크기 | 포맷 | 주 용도 |
|---|---|---|
| 16x16 | ICO / PNG | 브라우저 탭, 즐겨찾기 목록 |
| 32x32 | ICO / PNG | 고해상도 탭, 윈도우 작업표시줄 |
| 180x180 | PNG | iOS 홈 화면 아이콘 |
| 192x192 | PNG | 안드로이드 홈 화면 |
| 512x512 | PNG | PWA 스플래시 화면 |
원본 이미지는 512픽셀 이상의 정사각형 PNG로 준비하는 걸 권합니다. 작은 이미지를 키우면 계단 현상이 생기지만, 큰 이미지를 줄이는 건 품질 손실이 거의 없습니다. 벡터 원본이 있다면 SVG에서 512픽셀 PNG로 먼저 내보낸 뒤 변환에 넣는 순서가 가장 깔끔합니다.
HTML 삽입 코드와 파일 배치
파일을 다 만들었다면 head 태그 안에 링크를 걸어야 합니다. 최소 구성은 다음과 같습니다.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">favicon.ico는 루트 경로에 두는 게 관례입니다. link 태그를 하나도 안 걸어도 브라우저가 자동으로 도메인 루트의 /favicon.ico를 요청하기 때문입니다. 이 관례 덕분에 서버 로그를 보면 favicon.ico 404 에러가 유독 많이 찍힙니다.
여러 사이즈를 손으로 하나씩 리사이즈하고 코드를 작성하는 건 시간이 꽤 걸립니다. 이런 작업을 자동화하려면 파비콘 생성기를 활용해 이미지 하나로 전체 세트와 삽입 코드를 한 번에 받는 편이 효율적입니다.
?v=2 같은 쿼리 문자열을 href 뒤에 붙여 버전을 올리는 방법이 확실합니다.파비콘이 검색과 브랜딩에 미치는 영향
구글은 2019년부터 모바일 검색 결과에 사이트 파비콘을 함께 노출하고 있습니다. 검색 결과 페이지에서 내 사이트만 기본 지구본 아이콘으로 나온다면, 같은 순위에 있어도 클릭률에서 불리해집니다. 파비콘이 직접적인 순위 요소는 아니지만, 클릭률은 결과적으로 순위에 영향을 주는 신호로 작용합니다.
구글이 파비콘을 검색 결과에 표시하려면 몇 가지 조건이 있습니다.
- 파일 크기가 정사각형이고 48픽셀의 배수여야 합니다. 48, 96, 144픽셀이 안전한 값입니다.
- 파비콘 파일 경로가 robots.txt에서 차단되어 있으면 안 됩니다.
- 홈페이지의 head에 rel="icon" 링크가 존재해야 합니다.
- 성인물이나 혐오 표현 등 정책 위반 이미지는 표시되지 않습니다.
반영 속도는 즉각적이지 않습니다. 구글이 홈페이지를 다시 크롤링해야 하므로 며칠에서 몇 주가 걸릴 수 있습니다. 급하다면 서치 콘솔에서 홈페이지 URL 검사 후 색인 생성을 요청하면 조금 앞당길 수 있습니다.
작업 전 확인할 체크리스트
실제로 파비콘을 만들기 전에 다음을 미리 정해두면 재작업이 줄어듭니다.
- 다크 모드 대응: 검은 로고를 그대로 쓰면 다크 테마 브라우저 탭에서 안 보입니다. media 속성으로 라이트와 다크용 파비콘을 나눠 지정할 수 있습니다.
- iOS 모서리 처리: apple-touch-icon은 iOS가 자동으로 모서리를 둥글게 깎습니다. 투명 배경을 그대로 두면 검은 사각형이 되므로 배경색을 채워서 만들어야 합니다.
- 서브도메인 분리: 서비스별 서브도메인이 있다면 파비콘도 구분하는 게 좋습니다. 탭이 여러 개 열렸을 때 관리 페이지와 사용자 페이지를 즉시 구분할 수 있습니다.
- 개발과 운영 환경 구분: 로컬 개발 서버에 회색조 파비콘을 쓰면 실수로 운영 데이터를 건드리는 사고를 줄일 수 있습니다.
파비콘 하나에 이렇게까지 신경 써야 하나 싶을 수 있지만, 16픽셀짜리 이 이미지는 사용자가 브랜드를 가장 자주 마주치는 접점입니다. 방문자가 하루에 로고 전체를 보는 횟수보다 탭 아이콘을 보는 횟수가 훨씬 많습니다. 처음 만들 때 규격을 제대로 갖춰두면 이후 몇 년간 손댈 일이 없는, 투자 대비 효율이 높은 작업입니다.