2026년 최고의 파비콘 크기
최고의 파비콘 크기는 하나도 없으며 최고의 세트가 있습니다. 브라우저 탭, 북마크, Windows 탐색기, iOS 홈 화면 및 Android PWA 설치 프롬프트 등 표면마다 다른 해상도가 필요합니다. 각각 다른 픽셀 크기가 필요합니다. 512×512 소스에서 시작하여 favicon generator를 사용하면 한 번의 패스로 필요한 모든 크기를 생산할 수 있습니다. 모든 해상도의 표면별 지도는 favicon sizes explained 가이드를 참조하세요.
표준 밀도 디스플레이의 브라우저 탭은 16×16 픽셀을 사용합니다. 이는 가장 작은 파비콘 크기이며 사용자가 가장 자주 보는 크기입니다. 항상 페이지 콘텐츠 위의 작은 탭에 위치합니다. 가독성을 유지하는 16×16 아이콘에는 굵은 모양, 높은 대비 및 미세한 디테일이 필요하지 않습니다. 가는 선, 작은 텍스트, 복잡한 로고는 이 크기에서는 읽을 수 없는 얼룩이 됩니다.
32×32 픽셀 크기는 최신 브라우저에서 가장 중요한 파비콘 크기입니다. 이는 Retina/HiDPI 디스플레이(논리적 크기 16px에서 2배 밀도로 렌더링됨)의 브라우저 탭, 북마크바 및 주소 표시줄 제안 아이콘에 사용됩니다. Chrome는 32×32를 가장 적극적으로 요청하며 Google 검색은 검색 결과 파비콘에 최소한 32×32 아이콘을 사용합니다.
48×48 픽셀 크기는 '중간 아이콘' 보기에서 Windows Explorer를 제공하며 일부 검색 엔진에서는 결과 축소판을 위해 사용됩니다. 검색 파비콘 적격성에 대한 Google의 공식 권장 사항은 최소 48×48 픽셀, 정사각형 종횡비 및 HTTP를 통한 공개 접근성입니다. 이 요구 사항을 충족하려면 항상 다중 크기 .ico 파일 내에 48×48을 묶으세요.
64×64 픽셀 크기는 Windows Explorer의 큰 아이콘 보기 및 일부 앱 실행기 환경에 유용합니다. .ico 파일에 이를 포함하면 파일 크기가 최소화되고 48~128픽셀 사이의 크기를 요구하는 모든 표면에 대한 적용 범위가 보장됩니다. 대부분의 다중 크기 .ico 생성기에는 기본적으로 64가 포함됩니다.
128×128 및 256×256 픽셀 크기는 Windows 시작 메뉴 타일 및 고해상도 바로 가기용 .ico 파일 내에서 사용됩니다. 256×256에서는 BMP 인코딩 대신 .ico 내에서 PNG 압축을 사용해야 합니다. 압축되지 않은 256×256 BMP 항목만으로도 .ico 파일에 대략 256KB가 추가되는 반면, PNG로 압축하면 30KB 미만으로 줄어듭니다.
180×180 픽셀 크기는 iOS에서 사용되는 apple-touch-icon 크기입니다. 사용자가 Safari에서 '홈 화면에 추가'를 탭하면 iOS는 `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`를 가져와 해당 이미지를 홈 화면 아이콘으로 사용합니다. 이것이 없으면 iOS는 페이지의 낮은 품질 스크린샷으로 대체됩니다. 이는 모바일 우선 사이트의 우선순위가 가장 높은 단일 크기입니다.
Android Chrome의 PWA 설치 프롬프트에 대한 웹 앱 매니페스트(site.webmanifest)에는 192×192 픽셀 크기가 필요합니다. 사용자가 Android 홈 화면에 사이트를 추가하면 Chrome는 매니페스트를 읽고 앱 실행기 및 알림 창에 192×192 아이콘을 사용합니다. 아이콘은 정사각형, PNG 형식이어야 하며 선언된 URL에서 액세스할 수 있어야 합니다.
512×512 픽셀 크기는 홈 화면 실행 후 앱이 로드되는 동안 나타나는 PWA 스플래시 화면과 Chrome OS 설치 미리 보기에 사용되는 또 다른 필수 매니페스트 아이콘입니다. 이는 다른 모든 크기를 생성할 때 권장되는 소스 이미지 크기이기도 합니다. 512×512부터 시작하면 다운샘플링된 모든 변형이 선명한 가장자리를 유지할 수 있습니다.
거의 모든 사용자를 포괄하는 최소 실행 가능한 파비콘 설정은 16, 32, 48 및 64 픽셀 프레임을 포함하는 다중 크기 favicon.ico와 180×180 apple-touch-icon.png, 192×192 및 512×512 PNG 항목이 있는 site.webmanifest입니다. 이 조합은 표준 브라우저, 북마크, iOS 홈 화면 설치 및 Android PWA 설치를 처리합니다.
.ico 및 PNG와 함께 SVG 파비콘을 추가하면 미래에도 사용할 수 있는 아이콘이 됩니다. SVG는 모든 밀도로 렌더링합니다. 단일 파일은 96dpi 모니터, 4K 디스플레이 및 그 사이의 모든 것을 제공하며 사용자의 색 구성표 기본 설정에 따라 색상을 전환할 수 있습니다. Chrome, Edge, Firefox 및 Safari 15+는 모두 2026년부터 SVG 파비콘을 지원하므로 안전하게 추가할 수 있습니다.
파비콘 크기 조정의 일반적인 실수에는 .ico 없이 32×32 PNG만 사용(기존 브라우저 및 Windows 바로가기에서 손상됨), 180 apple-touch-icon 건너뛰기(iOS 설치에서 손상됨), 매니페스트에서 512×512 생략(Android 설치 프롬프트에 일반 아이콘이 표시됨)이 포함됩니다. favicon generator는 하나의 소스 이미지에서 자동으로 전체 세트를 생성하여 이러한 공백을 모두 제거합니다.
파비콘 크기의 SEO 영향은 간접적이지만 실제적입니다. Google 검색은 검색결과 옆에 파비콘을 표시하며 최소 크기 요구사항인 48×48픽셀을 적용합니다. 적절한 크기와 공개적으로 액세스할 수 있는 파비콘이 없는 사이트의 경우 검색 결과에 브랜드 마크 대신 일반 지구본 아이콘이 표시될 수 있습니다. 이는 자연 검색 클릭에 대한 작지만 눈에 띄는 신뢰 신호 차이입니다.
PWA급 아이콘 완성도를 위해 웹 매니페스트에 마스크 가능한 아이콘을 추가하세요. 마스크 가능한 아이콘은 모든 면에서 약 10%의 안전 영역 패딩을 갖고 있어 Android가 아이콘에 원형 또는 물결 모양 마스크를 적용할 때 핵심 로고가 잘리지 않도록 보장합니다. 생성기의 마스크 가능 내보내기 옵션을 사용하여 별도의 마스크 가능 버전을 생성하고 매니페스트 아이콘 배열에서 `'purpose': 'maskable'`를 사용하여 선언합니다.
파비콘 생성을 위한 소스 이미지를 선택할 때 PNG보다 SVG를, JPG보다 PNG를 우선순위로 지정하세요. SVG는 모든 크기에서 가장 선명한 출력을 생성합니다. PNG-32(알파 포함)는 투명성을 유지합니다. JPG에는 투명성 지원이 부족하며 작은 크기로 나타나는 압축 아티팩트가 도입됩니다. 전체 형식 비교를 보려면 best favicon format 가이드를 참조하세요.
작동 방식
- 1
512×512 정사각형 소스를 준비하세요
로고를 투명한 배경의 512×512 PNG 또는 정사각형 viewBox의 SVG로 내보냅니다. 16×16에서는 보이지 않는 미세한 디테일을 단순화합니다.
- 2
전체 크기 세트 생성
[favicon generator](tool:favicon-generator)에 업로드하세요. favicon.ico(16/32/48/64), favicon.svg, apple-touch-icon.png(180×180), android-chrome-192x192.png, android-chrome-512x512.png 및 site.webmanifest를 생성합니다.
- 3
모든 파일을 사이트 루트에 배포
생성기 패키지의 모든 파일을 /public 또는 사이트 루트 디렉터리에 복사합니다. 모든 파일은 해당 경로(예: https://yourdomain.com/favicon.ico)에서 액세스할 수 있어야 합니다.
- 4
HTML 링크 태그 추가
생성된 HTML 스니펫을 `<head>`에 붙여넣습니다. 6개 줄에는 .ico 대체, SVG 변형, apple-touch-icon 및 매니페스트 링크가 포함됩니다.
- 5
테스터로 모든 사이즈를 확인하세요
[favicon tester](utility:favicon-tester)를 사용하여 모든 URL이 올바르게 확인되고 아이콘이 16, 32, 48 및 512픽셀로 선명하게 렌더링되는지 확인하세요.
지금 사용해 보기
모든 파비콘 크기를 한 번에 생성
파비콘 생성기자주 묻는 질문
가장 중요한 파비콘 크기는 얼마입니까?+
32×32픽셀. 이는 Chrome와 대부분의 최신 브라우저가 표준 및 레티나 디스플레이의 탭을 요청하는 것입니다. 여러 크기의 .ico 내부와 일치하는 링크 태그가 있는 독립형 PNG로 배송하세요.
512×512 파비콘이 정말 필요한가요?+
그렇습니다. 두 가지 이유가 있습니다. 첫째, Android PWA 설치 프롬프트 및 스플래시 화면에 대한 웹 앱 매니페스트에 필요합니다. 둘째, 품질 손실 없이 모든 작은 크기를 생성하는 데 이상적인 소스 해상도입니다.
Google 검색에서는 어떤 파비콘 크기를 사용하나요?+
Google에는 최소 48×48픽셀, 정사각형 종횡비, 공개적으로 액세스할 수 있는 URL이 필요합니다. .ico 파일에 48×48을 포함하고 최상의 적용 범위를 위해 독립형 PNG 태그와 연결하세요. 유효한 파비콘은 귀하의 브랜드가 리치 검색 결과 스니펫에 표시되는 데 도움이 됩니다.
apple-touch-icon는 파비콘과 동일합니까?+
아니요. 파비콘(favicon.ico)은 브라우저에서 탭과 북마크용으로 사용됩니다. apple-touch-icon는 홈 화면 아이콘용으로 iOS에서만 사용되는 별도의 180×180 PNG입니다. 완전한 적용을 위해서는 두 파일이 모두 필요합니다.
하나의 큰 이미지를 사용하고 더 작은 크기 생성을 건너뛸 수 있나요?+
사이트의 탭에 파비콘이 표시되지 않는 경우에만 — 브라우저에는 탭 크기가 16 또는 32픽셀이 필요합니다. 512×512 PNG만 연결하면 브라우저가 이를 실시간으로 다운샘플링하게 되어 레이아웃 성능 문제와 브라우저 불일치 렌더링이 발생할 수 있습니다. 항상 적절한 다중 크기 .ico를 생성하세요.
지금 새 사이트를 시작하려면 어떤 크기에 우선순위를 두어야 합니까?+
순서: 32×32(탭), 180×180(iOS), 192×192(Android PWA), 512×512(스플래시/소스). [favicon generator](tool:favicon-generator)는 한 번의 다운로드로 4가지와 .ico, SVG 및 매니페스트를 모두 생성합니다.
파비콘 크기가 페이지 로드 속도에 영향을 미치나요?+
최소한. 잘 압축된 다중 크기 favicon.ico는 일반적으로 10-30KB입니다. 브라우저는 이를 한 번 가져와서 원본별로 캐시합니다. 올바른 크기를 사용하면 브라우저가 너무 큰 이미지를 로드하고 렌더링 시 이를 다운샘플링하는 것을 방지할 수 있습니다. 이는 무시할 수 있지만 실제 CPU 비용을 발생시킵니다.