수많은 기기, 브라우저, 플랫폼으로 인해 favicon 크기는 혼란스러울 수 있습니다. 6가지 다른 파일이 필요한가요? 아니면 하나로 충분할까요? 이 가이드가 그 혼란을 해결해 드립니다.
완벽한 Favicon 크기 표
| 크기 | 파일 | 사용처 | 필수 여부? |
|---|---|---|---|
| 16×16 | favicon-16x16.png | 브라우저 탭 (표준 화면) | 권장 |
| 32×32 | favicon-32x32.png | 브라우저 탭 (Retina/HiDPI), 작업 표시줄 | 예 |
| 48×48 | favicon.ico (멀티 사이즈) | Windows 바탕 화면 바로 가기 | 선택 사항 |
| 180×180 | apple-touch-icon.png | iOS 홈 화면 (iPhone/iPad) | 예 |
| 192×192 | android-chrome-192x192.png | Android 홈 화면, PWA 아이콘 | 권장 |
| 512×512 | android-chrome-512x512.png | PWA 스플래시 화면, 앱 스토어 | 권장 |
최소 설정 (3개 파일)
간단하게 유지하고 싶다면, 이 3개 파일로 실제 시나리오의 99%를 커버할 수 있습니다:
- favicon.ico (32×32) — 보편적인 대체 파일입니다. 모든 브라우저가 지원합니다.
- apple-touch-icon.png (180×180) — iOS 기기 및 일부 Android 런처용입니다.
- site.webmanifest — PWA 지원을 위해 192×192 및 512×512 아이콘을 가리킵니다.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">팁: 최신 브라우저는 실제로 ICO보다 PNG를 선호합니다. ICO와 함께 32×32 PNG를 포함하면, 최신 브라우저는 더 선명한 렌더링을 위해 PNG를 사용합니다.
전체 설정 (6개 파일)
모든 플랫폼에서 최고의 경험을 위해:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<meta name="theme-color" content="#ffffff">왜 하나의 큰 이미지만 사용하지 않나요?
흔한 실수는 512×512 아이콘만 제공하고 브라우저가 이를 축소할 것이라고 기대하는 것입니다. 이것이 문제가 되는 이유는 다음과 같습니다:
- 성능 — 512×512 PNG는 50KB 이상이 될 수 있습니다. 브라우저 탭은 16×16 (1KB 미만)만 필요합니다. 이는 필요한 데이터보다 50배나 많습니다.
- 품질 — 복잡한 로고를 512px에서 16px로 축소하면 종종 흐릿하게 보입니다. 수동으로 최적화된 작은 아이콘이 훨씬 더 보기 좋습니다.
- ICO 호환성 — 오래된 브라우저와 Windows 바로 가기는 여전히 ICO 형식을 예상합니다.
하나의 이미지에서 모든 크기 생성하기
좋은 소식은 각 크기를 수동으로 만들 필요가 없다는 것입니다. Mzu favicondl의 Image to Favicon 도구를 사용하여 고해상도 이미지 하나를 업로드하면 위에 나열된 모든 크기가 자동으로 생성되어 바로 사용할 수 있는 ZIP 파일로 패키징됩니다.
빠른 참조 치트 시트
| 플랫폼 | 필요한 크기 | 형식 |
|---|---|---|
| Chrome/Firefox/Edge 탭 | 32×32 | PNG 또는 ICO |
| Safari 탭 | 32×32 | PNG 또는 ICO |
| Google 검색 결과 | ≥48×48 (48의 배수) | 모든 형식 |
| iPhone/iPad 홈 화면 | 180×180 | PNG |
| Android 홈 화면 | 192×192 | PNG |
| Windows 작업 표시줄 | 32×32 | ICO |
| macOS Dock (PWA) | 512×512 | PNG |