Favicon은 어느 정도 크기가 적당할까요?
적절한 Favicon 크기를 선택해야 브라우저, 디바이스, 플랫폼 전반에서 아이콘이 또렷하게 표시됩니다.
이 가이드는 상황별로 추천되는 Favicon 크기와, 각 포맷을 언제 사용해야 하는지에 대해 설명합니다.
요약
한 줄 정리:
권장 Favicon 크기는 16×16, 32×32, 이며, 브라우저용은 48×48까지, Apple 기기는 180×180, Android 및 PWA 앱은 192×192와 512×512를 사용하는 것이 좋습니다.
브라우저용 Favicon 크기
데스크톱 및 모바일 브라우저에서 최대 호환성을 확보하려면 여러 크기의 PNG 아이콘과, 여러 크기를 포함한 ICO 파일을 함께 제공하는 것이 좋습니다.
| 크기 | 파일 | 용도 |
|---|---|---|
| 16×16 | favicon-16x16.png | 브라우저 탭 |
| 32×32 | favicon-32x32.png | 작업 표시줄 및 브라우저 UI |
| 48×48 | favicon-48x48.png | 데스크톱 바로가기 |
| 멀티 사이즈 | favicon.ico | 레거시 브라우저 호환 |
Apple Touch 아이콘 크기
Apple 기기에서 사이트를 홈 화면에 추가할 때는 더 큰 아이콘 크기가 사용됩니다.
| 크기 | 파일 | 디바이스 |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Android 및 PWA 아이콘 크기
PWA와 Android Chrome 설치 플로우에서는 아이콘 크기에 대한 명확한 기준이 있습니다.
| 크기 | 파일 | 용도 |
|---|---|---|
| 192×192 | android-chrome-192x192.png | 홈 화면 아이콘 |
| 512×512 | android-chrome-512x512.png | 앱 런처 및 스플래시 화면 |
이 크기들은 PWA 설치 검사 기준을 통과하는 데 필요합니다.
SVG Favicon 크기
SVG Favicon은 벡터 형식이므로, 고정된 픽셀 크기를 지정할 필요가 없습니다.
권장 설정:
- 정사각형 viewBox 사용 (예: 0 0 100 100)
- 아트워크를 중앙에 배치
- 지나치게 복잡한 디테일은 피하기
SVG Favicon은 고해상도 및 확대 환경에서도 깨끗하게 렌더링됩니다.
어떤 Favicon 형식을 사용해야 하나요?
| 형식 | 사용 권장 상황 |
|---|---|
| PNG | 가장 일반적인 선택, 높은 호환성이 필요할 때 |
| ICO | 레거시 브라우저 및 특수 환경 호환성이 필요할 때 |
| SVG | 모던 브라우저, 확장 가능한 아이콘, 다크 모드 지원이 필요할 때 |
Best practice: Use PNG + ICO + SVG together.
Recommended HTML Markup
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
이미지를 업로드해 완성된 Favicon 세트를 생성하세요