파비콘 사이즈·포맷 총정리
파비콘을 만들려고 검색하면 16px, 32px, 180px, 512px 같은 숫자가 쏟아집니다. 전부 만들어야 하나 싶지만, 각 크기가 어디에 쓰이는지만 알면 필요한 것과 건너뛰어도 되는 것이 명확해집니다. 이 글에서 크기별 용도와 포맷 선택 기준을 표로 정리합니다.
최종 업데이트: 2026년 7월 · 최신 브라우저 기준
1. 파비콘이 뜨는 자리
파비콘은 브라우저 탭에만 뜨는 게 아닙니다. 생각보다 여러 곳에서 사이트의 얼굴 노릇을 합니다.
- 브라우저 탭·주소창: 가장 익숙한 자리. 16px로 아주 작게 표시됩니다.
- 북마크·방문 기록: 목록에서 사이트를 구분하는 표식이 됩니다.
- 스마트폰 홈 화면: "홈 화면에 추가"를 하면 앱 아이콘처럼 크게 표시됩니다.
- 구글 검색결과: 모바일·PC 검색결과에서 사이트 이름 옆에 표시됩니다.
- 카카오톡 등 링크 미리보기: 일부 서비스가 링크 옆에 파비콘을 보여 줍니다.
핵심: 표시되는 자리마다 요구하는 크기가 다릅니다. 그래서 파비콘은 한 장이 아니라 크기 세트로 준비하는 것이 표준 관례가 됐습니다.
2. 크기별 용도 한 표 정리
| 크기 | 파일명(관례) | 쓰이는 곳 |
|---|---|---|
| 16×16 | favicon.ico / favicon-16x16.png | 브라우저 탭, 주소창 |
| 32×32 | favicon.ico / favicon-32x32.png | 고해상도 화면의 탭, 작업 표시줄 바로가기 |
| 48×48 | favicon.ico | 윈도우 바탕화면 바로가기, 구글 검색결과 기준 크기 |
| 180×180 | apple-touch-icon.png | 아이폰·아이패드 홈 화면 아이콘 |
| 192×192 | android-chrome-192x192.png | 안드로이드 홈 화면 아이콘 |
| 512×512 | android-chrome-512x512.png | PWA 설치 화면·스플래시 이미지 |
이 표의 파일명은 법으로 정해진 건 아니고, 널리 쓰이는 관례입니다. 파일명을 바꿔도 되지만 HTML 코드의 경로도 함께 바꿔야 하니, 관례를 그대로 따르는 편이 편합니다.
3. ico·png·svg, 뭘 쓸까
| 포맷 | 장점 | 약점 | 추천 용도 |
|---|---|---|---|
| ICO | 모든 브라우저·구형 환경까지 호환, 여러 크기를 한 파일에 담음 | 파일이 큰 편 | 기본. 루트에 favicon.ico 한 장 |
| PNG | 가볍고 선명, 투명 지원 | 크기마다 파일이 따로 필요 | 크기별 보조 파일(16·32·180·192·512) |
| SVG | 무한 확대에도 선명, 다크 모드 대응 가능 | 사파리 등 일부 환경에서 지원이 불완전 | 여유가 있을 때 추가로 |
정리하면 ICO를 기본으로 두고 PNG 세트를 보조로 올리는 조합이 현재 가장 무난합니다. SVG 파비콘은 좋은 선택지지만 아직 "이것만 올리면 끝"은 아니어서, 있으면 좋고 없어도 되는 위치입니다.
4. 최소 구성과 풀 구성
바빠서 하나만 올린다면
사이트 최상위(루트)에 favicon.ico 한 장. 브라우저가 별도 코드 없이도
/favicon.ico를 알아서 찾아가므로, 이것만으로 탭·북마크는 해결됩니다.
제대로 갖춘다면
아래 다섯 줄이면 데스크톱·아이폰·안드로이드·PWA까지 전부 커버됩니다.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<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">
<link rel="manifest" href="/site.webmanifest">티스토리·워드프레스처럼 관리자 화면에서 업로드하는 플랫폼이라면 이 코드가 필요 없습니다. 플랫폼별 방법은 파비콘 생성기 페이지 아래에 정리해 두었습니다.
5. 구글 검색결과에 뜨는 파비콘
구글은 검색결과에 사이트 이름과 함께 파비콘을 보여 줍니다. 구글 가이드라인의 요점은 이렇습니다.
- 크기는 48×48px의 배수를 권장합니다(48, 96, 144…). 멀티 크기 ICO도 괜찮습니다.
- 파비콘 파일과 홈페이지 둘 다 구글이 크롤링할 수 있어야 합니다(robots.txt로 막지 않기).
- 바꾼 파비콘은 구글이 다시 수집해야 반영되므로 며칠 걸릴 수 있습니다.
팁: 검색결과의 파비콘은 아주 작게 나옵니다. 글자를 빼곡히 넣기보다 단순한 심볼이나 이니셜 한 글자가 훨씬 잘 읽힙니다.
이미지·글자·이모지로 지금 바로 파비콘을 만들 수 있습니다. ICO와 PNG 세트, HTML 코드까지 ZIP 하나로 나옵니다.
파비콘 생성기 열기6. 자주 묻는 질문
모든 크기를 다 만들어야 하나요?
아닙니다. 표의 여섯 크기를 다 갖추면 좋지만, 최소한 favicon.ico 하나로도 동작은 합니다. 생성기를 쓰면 어차피 전 크기가 한 번에 나오니 고민할 필요가 없습니다.
512px짜리 하나만 올리면 브라우저가 알아서 줄여 주지 않나요?
줄여 주긴 하지만, 16px까지 줄어들면 브라우저의 축소 품질에 따라 흐릿해질 수 있습니다. 크기별 파일을 따로 주면 각 자리에서 가장 선명한 그림이 쓰입니다.
파비콘을 바꿨는데 옛날 아이콘이 계속 보여요.
브라우저가 파비콘을 오래 캐시하기 때문입니다. 강력 새로고침(Ctrl+F5)이나 캐시 삭제로 확인하고, 방문자에게도 서서히 반영된다고 보면 됩니다.