파비콘(favicon) 만드는 법: 16×16부터 512×512까지 규격 완벽 정리
브라우저 탭이나 즐겨찾기 목록을 보면 사이트 이름 앞에 작은 아이콘이 붙어 있습니다. 이걸 파비콘(favicon, favorite + icon)이라고 부릅니다. 별것 아닌 것 같지만, 탭을 여러 개 띄워 둔 사용자에게는 내 사이트를 한눈에 찾게 해 주는 작은 간판 역할을 합니다. 블로그나 홈페이지를 운영한다면 반드시 챙겨야 할 요소죠. 어떤 크기로, 어떤 포맷으로 만들어야 모든 환경에서 깨지지 않는지 정리했습니다.
파비콘이 표시되는 곳
파비콘은 생각보다 여러 곳에서 쓰입니다.
- 브라우저 탭: 가장 익숙한 위치. 보통 16×16 또는 32×32px로 축소되어 표시됩니다.
- 즐겨찾기·북마크 목록: 글자 옆 작은 아이콘.
- 스마트폰 홈 화면 추가: 사이트를 홈에 추가하면 앱처럼 아이콘이 생깁니다. 이때 더 큰 이미지가 필요합니다.
- 검색 결과: 구글 모바일 검색 결과에서 사이트 주소 옆에 파비콘이 노출됩니다.
즉, 작은 화면용과 큰 화면용을 여러 크기로 준비해 두는 것이 안전합니다.
꼭 필요한 크기 정리
요즘은 한 장만 만들고 끝내기보다, 용도별로 몇 가지를 갖추는 방식이 표준입니다.
- 16×16 / 32×32 / 48×48px: 브라우저 탭과 즐겨찾기용. 이 세 크기를 묶어
favicon.ico하나로 만들어 두면 호환성이 가장 좋습니다. - 180×180px: 애플 터치 아이콘(Apple Touch Icon). 아이폰·아이패드에서 홈 화면에 추가할 때 쓰입니다.
- 192×192px / 512×512px: 안드로이드 크롬과 PWA(웹앱 매니페스트)용. 홈 화면 아이콘과 앱 설치 시 사용됩니다.
- SVG(벡터): 가능하다면 SVG 파비콘도 함께 두면 어떤 크기로 확대돼도 깨지지 않습니다.
정리하면 favicon.ico(16·32·48) + 180×180 + 192×192 + 512×512 정도를 갖추면 거의 모든 환경을 커버합니다.
만들 때 지켜야 할 디자인 원칙
파비콘은 최종적으로 16~32px라는 아주 작은 크기로 줄어듭니다. 그래서 큰 화면에서 멀쩡해 보이던 디자인도 축소되면 뭉개지기 쉽습니다. 몇 가지 원칙만 지키세요.
- 단순하게: 글자가 많거나 디테일이 복잡하면 작게 줄였을 때 알아볼 수 없습니다. 로고의 핵심 요소 하나, 또는 이니셜 한두 글자가 적당합니다.
- 정사각형 기준: 파비콘은 1:1 비율이 기본입니다. 가로세로가 다른 로고라면 여백을 넣어 정사각형으로 맞추세요.
- 배경 처리: 투명 배경(PNG)으로 만들면 다크 모드 탭에서 안 보일 수 있습니다. 옅은 배경색을 깔거나, 밝은 곳·어두운 곳 모두에서 보이는 색을 고르는 게 안전합니다.
- 여백 확보: 아이콘이 가장자리에 꽉 차면 답답해 보입니다. 안쪽으로 약간의 여백을 두면 또렷합니다.
적용하는 법
이미지를 준비했다면 사이트에 연결만 하면 됩니다. 직접 HTML을 다룬다면 <head> 안에 아래처럼 넣습니다.
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
네이버 블로그나 티스토리, 워드프레스, 카페24 같은 서비스를 쓴다면 관리 페이지의 “파비콘 설정” 메뉴에서 이미지를 업로드하기만 하면 됩니다. 이 경우 서비스가 요구하는 크기(보통 정사각형 PNG)에 맞춰 한 장만 올리면 알아서 처리해 주는 경우가 많습니다.
마무리
파비콘은 작지만 사이트의 첫인상을 좌우하는 요소입니다. favicon.ico(16·32·48)를 기본으로 두고, 180×180·512×512를 추가로 갖춰 두면 PC와 모바일, 검색 결과까지 빈틈이 없습니다. 디자인은 무조건 단순하게, 비율은 정사각형으로 맞추는 것만 기억하세요. 준비한 로고나 이미지를 정확한 정사각형 크기로 빠르게 맞추고 싶다면 유튜브 이미지 규격 변환기로 손쉽게 리사이즈해 보세요. 다양한 플랫폼의 이미지 규격이 궁금하다면 SNS 이미지 규격 한 장 비교표도 함께 참고하면 좋습니다.