모든 기기에서 선명하고 전문적인 아이콘을 표시하려면 적절한 파비콘 크기를 선택하는 것이 필수적입니다. 이 종합적인 파비콘 크기 안내 2026년에 필요한 모든 크기를 아우릅니다. 고전적인 16×16 브라우저 탭 아이콘부터 512×512 마스킹 가능한 PWA 아이콘에 이르기까지, 다양한 플랫폼에서 브랜드 이미지를 선명하게 유지할 수 있는 형식과 모범 사례도 함께 제공합니다.
파비콘 크기가 중요한 이유
파비콘은 다양한 브라우저, 운영 체제, 홈 화면에서 여러 크기로 표시됩니다. 각 플랫폼마다 특정 크기를 요구하기 때문에, 하나의 소스 파일만으로는 모든 상황에 대응할 수 없습니다. 한 가지 크기만 제공하면 브라우저가 이를 확대하거나 축소하게 되는데, 이로 인해 이미지가 흐릿해지거나 잘리는 경우가 많아 브랜드 이미지를 약화시킬 수 있습니다.
각 플랫폼에 맞는 올바른 파비콘 크기를 제공하면 이미지가 네이티브 해상도로 렌더링되어 선명한 가장자리, 정확한 색상, 안정적인 투명도를 보장할 수 있습니다. 이 가이드에서는 생성할 가치가 있는 모든 크기를 나열하고 각 크기가 어디에 사용되는지 설명하므로, 안심하고 완벽한 번들을 배포할 수 있습니다.
파비콘 크기 종합 안내
아래 표에는 2026년 기준 최신 웹사이트에서 제공해야 할 파비콘 크기, 각 파비콘이 사용하는 형식, 그리고 이를 활용하는 플랫폼이 정리되어 있습니다. 번들을 준비할 때 이 표를 유일한 참고 자료로 활용하십시오.
| 크기 | 서식 | 용도 |
|---|---|---|
| 16×16 | ICO / PNG | 클래식 브라우저 탭, 구버전 지원 |
| 32×32 | ICO / PNG | 레티나 디스플레이에서 표시되는 표준 브라우저 탭 |
| 48×48 | ICO | Windows 작업 표시줄, 몇 가지 북마크 보기 |
| 64×64 | PNG | 고해상도(DPI) 디스플레이의 브라우저 주소 표시줄 |
| 96×96 | PNG | 바탕화면 즐겨찾기 및 바로가기 |
| 120×120 | PNG | 구형 안드로이드 홈 화면 |
| 152×152 | PNG | iPad 터치 아이콘 (구 버전) |
| 167×167 | PNG | iPad Pro 터치 아이콘 |
| 180×180 | PNG | iPhone apple-touch-icon (현재) |
| 192×192 | PNG | Android Chrome 홈 화면, PWA |
| 512×512 | PNG | PWA 스플래시 화면, 가릴 수 있는 아이콘 |
생성해야 할 필수 크기
위의 전체 목록은 포괄적이지만, 간소화된 세트만으로도 대다수의 사용자를 아우를 수 있습니다. 당사의 파비콘 생성기 단 한 번의 업로드로 이 필수 번들을 생성합니다:
- 16×16 및 32×32—표준 화면과 레티나 화면에서 데스크톱 브라우저 탭에 주로 사용되는 크기입니다.
- 48×48—Windows 작업 표시줄 표시 및 구형 북마크를 위해 ICO 파일에 포함되어 있습니다.
- 180×180—iOS에서 홈 화면 바로가기를 생성하는 데 필요한 apple-touch-icon.
- 192×192 및 512×512—웹 매니페스트에 선언된 Android 및 PWA 크기.
최신 브라우저용 SVG 버전과 함께, 이 세트는 2026년에 방문자가 사용할 수 있는 거의 모든 기기를 아우릅니다. 각 레거시 크기를 수동으로 추적할 필요가 없습니다. 생성기가 이를 자동으로 묶어 제공합니다.
파비콘 형식 비교
크기는 전체의 절반에 불과하며, 형식에 따라 호환성과 파일 크기가 결정됩니다. 아래 비교표는 함께 제공해야 할 세 가지 형식을 요약한 것입니다:
| 서식 | 결의안 | 파일 크기 | 가장 적합한 대상 |
|---|---|---|---|
| ICO | 수정됨 (다양한 크기의 컨테이너) | 중소형 | 구형 브라우저, /favicon.ico 대체 처리 |
| PNG | 수정됨 (파일당 하나의 크기) | Small | 최신 브라우저, apple-touch-icon, 안드로이드 |
| SVG | 벡터(해상도에 독립적) | 아주 작은 | Safari, Chrome, 다크 모드 지원 아이콘 |
SVG는 어떤 픽셀 밀도에도 완벽하게 확장되며, 다크 모드에 자동으로 적응하는 미디어 쿼리를 포함할 수 있기 때문에 2026년에 특히 유용합니다. 저희 생성기는 벡터 소스 파일을 업로드하면 자동으로 SVG 파일을 생성하므로, 이는 번들 내에서 가장 미래 지향적인 형식입니다.
플랫폼별 크기 요구 사항
데스크톱 브라우저
Chrome, Firefox, Safari, Edge와 같은 데스크톱 브라우저는 16×16 및 32×32 픽셀 크기의 파비콘을 요청합니다. 레티나 디스플레이에서는 탭에 32×32 크기의 파비콘이 사용됩니다. ICO 형식은 두 크기를 하나의 파일에 묶어 제공할 수 있기 때문에, /favicon.ico 파일을 제공하는 것은 오늘날에도 여전히 권장되는 방법입니다. 이는 자동 대체 기능 역할을 하기 때문입니다.
Apple iOS 및 iPadOS
애플 기기는 사이트를 홈 화면에 추가할 때 표준 파비콘 링크를 무시합니다. 대신 rel=”apple-touch-icon”으로 지정된 180×180 PNG 파일을 찾습니다. 이 파일이 없으면 iOS는 해당 페이지의 스크린샷이나 일반 아이콘을 사용하게 되는데, 이는 전문성이 떨어질 뿐만 아니라 가장 인기 있는 모바일 플랫폼에서 브랜드 일관성을 해치게 됩니다.
안드로이드 및 프로그레시브 웹 앱
Android Chrome 및 PWA 설치 프로그램은 웹 앱 매니페스트에서 아이콘을 읽어옵니다. 필수로 제공해야 하는 두 가지 크기는 192×192와 512×512입니다. 512×512 크기의 아이콘은 PWA 스플래시 화면에도 사용됩니다. 마스크 가능한 아이콘(다양한 Android 아이콘 모양에 맞춰 변형되는 아이콘)의 경우, 매니페스트에서 512×512 PNG 파일을 “purpose”:”maskable”로 지정해야 합니다.
파비콘 크기 설정 모범 사례
다음 모범 사례를 따르시면 모든 크기와 플랫폼에서 파비콘이 선명하게 표시됩니다:
- 큰 그림부터 시작하세요. 모든 축소 이미지가 선명하게 유지되도록 512×512 크기 이상의 원본 파일에서 생성하십시오.
- 모든 크기의 상품을 배송합니다. 16, 32, 48, 180, 192, 512 및 SVG를 제공하여 모든 범위를 포괄하도록 하십시오.
- /favicon.ico 파일을 루트 디렉터리에 두십시오. 링크 태그가 없을 경우 브라우저는 기본적으로 이 URL로 이동합니다.
- 16×16 크기로 테스트해 보세요. 디자인이 가장 작은 크기에서도 잘 어울린다면, 어떤 크기에서든 멋지게 보일 것입니다.
- 가능하면 벡터를 사용하세요. SVG는 어떤 해상도에도 자동으로 맞춰지며 다크 모드를 지원합니다.
모든 크기를 한 번에 생성하는 방법
이 모든 사이즈를 수작업으로 제작하려면 지루할 것입니다. 저희의 무료 파비콘 생성기 네 가지 간단한 단계를 통해 여러분을 대신해 작업을 처리해 드립니다:
- 512×512 크기 이상인 정사각형 원본 이미지를 업로드하세요.
- 16×16, 32×32, 180×180 크기의 실시간 미리보기를 확인해 보세요.
- ‘만들기’를 클릭하면 위에 나열된 모든 크기와 형식이 포함된 ZIP 파일을 다운로드할 수 있습니다.
- 포함된 HTML 링크 태그와 매니페스트를 귀하의 사이트에 복사해 넣으세요.
전체 과정은 1분도 채 걸리지 않으며, 이 가이드에서 다루는 모든 플랫폼에 호환되는 파일 모음을 생성해 줍니다. 어떤 크기의 파일을 어디에 사용해야 하는지 일일이 기억할 필요가 없습니다. 생성기가 각 파일의 이름을 올바르게 지정하고, 이에 맞는 링크 태그도 함께 제공해 주기 때문입니다.
자주 묻는 질문
웹사이트의 표준 파비콘 크기는 얼마인가요?
브라우저 탭에 사용되는 가장 일반적인 파비콘 표준 크기는 32×32 픽셀이며, ICO 파일 내에는 16×16 크기의 대체 이미지가 포함되어 있습니다. 최신 웹사이트는 iOS용으로 180×180 크기의 파비콘을, 안드로이드 및 PWA용으로 192×192와 512×512 크기의 파비콘을 함께 제공해야 합니다.
원본 이미지의 크기는 어느 정도여야 하나요?
최소 512×512 픽셀 크기의 정사각형 원본 이미지를 사용하세요. 원본 이미지가 클수록 생성기가 필요한 모든 크기로 깔끔하게 축소할 수 있어, 레티나 디스플레이와 고해상도 모바일 화면에서도 파비콘이 선명하게 표시됩니다.
apple-touch-icon의 크기는 얼마인가요?
현재 apple-touch-icon의 크기는 180×180 픽셀입니다. iOS는 홈 화면 바로가기에 이 PNG 파일을 사용하며 표준 파비콘 링크는 무시하므로, HTML에서 rel=”apple-touch-icon”을 지정하여 선언해야 합니다.
안드로이드에서는 파비콘의 크기를 어떻게 지정해야 하나요?
Android Chrome 및 프로그레시브 웹 앱(PWA)의 경우, 웹 앱 매니페스트에 192×192 및 512×512 크기의 PNG 아이콘을 선언해야 합니다. 512×512 아이콘은 Android가 다양한 홈 화면 모양에 맞게 조정할 수 있도록 ‘maskable’로 표시되어야 합니다.
파비콘에는 SVG를 사용해야 할까요, 아니면 PNG를 사용해야 할까요?
두 가지 형식을 모두 사용하세요. SVG는 최신 브라우저에서 완벽하게 크기가 조정되며 다크 모드를 지원하지만, PNG는 iOS, Android 및 구형 브라우저와의 호환성을 보장합니다. ICO, PNG, SVG 세 가지 형식을 모두 제공하면 어디서나 파비콘이 선명하게 표시됩니다.
크기가 성능과 로딩에 미치는 영향
적절한 크기의 파비콘을 제공하는 것은 단순히 시각적인 문제뿐만 아니라 사이트 로딩 속도에도 영향을 미칩니다. 브라우저가 32×32 크기의 탭 아이콘을 요청했는데, 대신 512×512 크기의 PNG 파일을 제공하면 방문자는 화면에 표시되는 아주 작은 요소에 비해 필요 이상으로 많은 바이트를 다운로드하게 됩니다. 수많은 방문자가 페이지를 여러 번 로드함에 따라, 이러한 낭비되는 대역폭은 누적됩니다. 각 크기를 별도의 파일로 제공하고 링크 태그에서 올바른 `sizes` 속성을 지정하면, 브라우저가 자동으로 가장 작은 적합한 파일을 선택하도록 할 수 있습니다. 그 결과, 첫 화면 표시(First Paint)가 빨라지고 페이지 프로필이 간소화되는데, 이는 사용자 경험과 2026년 코어 웹 바이탈(Core Web Vitals) 모두에 중요한 요소입니다. 생성기는 각 파일의 이름과 크기를 정확하게 지정하여 이러한 최적화를 자동으로 처리해 줍니다.
지금 모든 파비콘 크기를 생성하세요
더 이상 각 플랫폼마다 필요한 크기를 일일이 기억할 필요가 없습니다. 저희 생성기에 정사각형 이미지 한 장만 업로드하면, 이 가이드에 설명된 모든 크기와 형식을 아우르는 완전한 이미지 번들뿐만 아니라 바로 붙여넣을 수 있는 HTML 코드와 매니페스트까지 다운로드할 수 있습니다. 이는 2026년에 모든 브라우저와 기기를 만족시킬 수 있는 가장 간단한 방법입니다. 레티나 태블릿에서의 선명도, iOS의 깔끔한 홈 화면 바로가기, 완벽한 PWA 스플래시 화면 등 어떤 요소에 신경 쓰시든, 단 한 번의 다운로드로 모든 것을 해결할 수 있습니다.
