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
자주 묻는 질문
권장되는 모든 크기를 다 제공해야 하나요?
필수는 아니지만, 여러 대표 크기와 멀티 사이즈 ICO 파일을 함께 제공하면 다양한 환경에서 더 좋은 표시 품질을 기대할 수 있습니다.
512×512 아이콘 하나만 사용해도 되나요?
하나의 큰 아이콘을 축소해서 사용할 수는 있지만, 일부 오래된 환경에서는 흐릿하게 보이거나 의도와 다른 결과가 나올 수 있습니다. 여러 핵심 크기를 준비하는 편이 안전합니다.
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.