오늘날 파비콘 크기는 파일 다섯 개로 정리됩니다. 32×32 favicon.ico, SVG 아이콘, 180×180 Apple touch icon, 그리고 웹 앱 매니페스트의 192×192와 512×512 PNG 두 개(그중 하나는 마스커블)입니다. 57×57 Apple 아이콘, Windows 타일, 여러 PNG 크기 같은 나머지는 레거시이므로 빼도 됩니다.
파비콘 크기표
| 파일 | 크기 | 사용처 | 비고 |
|---|---|---|---|
favicon.ico | 32×32 (16과 48도 함께 넣을 수 있음) | 모든 브라우저, RSS 리더, /favicon.ico를 요청하는 모든 도구 | HTML에서 다른 아이콘을 선언하더라도 사이트 루트에 두세요. |
favicon.svg | 제한 없음, 정사각형 viewBox | Chrome, Edge, Firefox의 탭 | 어떤 크기에서도 선명하고 다크 모드에서 색상을 바꿀 수 있습니다. |
favicon-96x96.png | 96×96 | 구글 검색 | Apple touch icon을 선언했다면 선택 사항입니다. 구글은 둘 다 읽습니다. |
apple-touch-icon.png | 180×180 | iPhone과 iPad 홈 화면, 구글 검색 | 불투명 배경. 모서리는 iOS가 직접 둥글게 만듭니다. |
| 매니페스트 아이콘 | 192×192 | Android 홈 화면 | 웹 앱 매니페스트의 icons에 나열합니다. |
| 매니페스트 아이콘 | 512×512 | 설치 안내, 스플래시 화면 | Chrome의 설치 조건은 192 아이콘과 512 아이콘을 요구합니다. |
| 마스커블 아이콘 | 512×512 | Android 어댑티브 아이콘 | "purpose": "maskable", 로고는 중앙의 80% 원 안에 둡니다. |
브라우저 탭: favicon.ico와 SVG
탭은 아이콘을 16 CSS 픽셀로 표시하며, 고밀도 화면에서는 32 기기 픽셀이 됩니다. 그래서 favicon.ico 안의 32×32 이미지가 가장 중요합니다. 같은 파일에 16과 48을 추가해도 되며, 브라우저는 가장 가까운 것을 고릅니다.
SVG 아이콘 하나로 모든 크기를 처리할 수 있습니다. prefers-color-scheme 미디어 쿼리를 넣으면 어두운 로고가 다크 탭에서는 밝게 바뀌기도 합니다. ICO를 sizes="32x32"로 먼저 선언하고 그 뒤에 SVG를 선언하세요. SVG를 지원하는 브라우저는 SVG를 쓰고, 나머지는 ICO로 대체합니다.
구글 검색
구글의 파비콘 가이드라인은 8×8픽셀 이상의 정사각형 아이콘을 요구하고 48×48보다 큰 아이콘을 권장합니다. 지원 형식은 BMP, GIF, ICO, PNG, JPEG, PPM, TIFF입니다. SVG는 이 목록에 없으므로 SVG만 있는 사이트는 구글이 쓸 수 있는 파일이 없습니다. 구글은 rel="icon"과 rel="apple-touch-icon"을 모두 읽으므로 180×180 Apple touch icon을 선언했다면 크기 권장 사항은 이미 충족합니다. 전용 파일을 따로 두려면 96×96 PNG가 알맞습니다.
iPhone과 iPad
사용자가 사이트를 홈 화면에 추가하면 iOS는 Apple touch icon을 사용합니다. 현재 iPhone에는 180×180(3배 배율의 60포인트)이 맞는 크기이고, iPad는 이를 문제없이 줄여 쓰므로 파일 하나로 충분합니다. 투명 영역은 홈 화면에서 검게 바뀌므로 아이콘에는 단색 배경을 지정하세요. 아이콘이 없으면 iOS는 페이지 스크린샷이나 단색 타일 위의 글자 하나로 대체합니다.
Android와 설치형 웹 앱
Android와 Chrome은 웹 앱 매니페스트에서 아이콘을 읽습니다. 192×192 아이콘은 홈 화면에 쓰이고, 512×512 아이콘은 설치 대화상자와 스플래시 화면에 나타납니다.
마스커블 아이콘은 그림이 정사각형 전체를 채우는 별도의 512×512 이미지입니다. Android는 휴대폰이 쓰는 모양(원, 스쿼클, 둥근 사각형)으로 이를 잘라 냅니다. 로고를 이미지 지름의 80%인 중앙 원 안에 두면 어떤 마스크에서도 잘리지 않습니다. 마스커블 아이콘이 없으면 Android는 일반 아이콘을 줄여 흰 원 위에 올립니다.
HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">그리고 site.webmanifest의 아이콘 부분입니다.
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]매니페스트는 application/manifest+json으로, 아이콘은 각자의 실제 이미지 타입으로 제공하세요. 서버가 /favicon.ico 요청에 HTML 페이지를 상태 200으로 응답하면 네트워크 탭에서는 정상으로 보여도 아이콘이 깨집니다. 싱글 페이지 앱에서 자주 생기는 문제입니다.
빼도 되는 크기
- 57, 60, 72, 76, 114, 120, 144, 152px의 Apple touch icon. iOS가 180px 아이콘을 축소해서 씁니다.
mstile-*.png,browserconfig.xml,msapplication-*태그. Windows 8과 10의 시작 화면 타일용이었습니다.- Safari의
mask-icon. Safari 12 이상은 고정 탭에도 일반 파비콘을 씁니다. favicon.ico에 이미 16×16과 32×32가 들어 있을 때 따로 거는 16×16, 32×32 PNG 링크.
내 파비콘 세트 검사
Favicon Checker는 위의 모든 파일을 사이트에서 가져와 실제 크기와 형식을 측정하고, 아이콘이 탭, 구글, iOS, Android에서 어떻게 보이는지 보여 줍니다.