웹사이트에 가장 적합한 파비콘 크기

favicon는 탭에서 16×16, Retina 북마크 바에서 32×32, iPhone 홈 화면에서 180×180, PWA 스플래시 화면에서 512×512 등 많은 물리적 픽셀로 확장됩니다. 하나의 이미지가 모든 기능을 제대로 제공할 수는 없습니다.

작은 소스를 확대하면 흐림이 발생합니다. 테스트 없이 상세한 1024×1024를 축소하면 미세한 선이 손실됩니다. 수정 사항은 특수 제작된 내보내기의 작은 세트 또는 공통 데스크탑 프레임을 포함하는 다중 크기 .ico입니다.

이전 블로그 게시물에 나열된 모든 사이즈를 배송하는 것은 낭비입니다. 배송이 너무 적으면 한 플랫폼에서 눈에 띄는 간격이 남습니다. 아래 매트릭스는 2026년 브라우저에서 측정된 실제 요청을 반영합니다.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

데스크탑 탭은 일반적으로 16×16 CSS 픽셀 아이콘을 렌더링하며, 이는 디스플레이 밀도에 따라 16×16 또는 32×32 장치 픽셀에 매핑됩니다.

북마크 바와 고정 탭은 32×32 또는 48×48을 사용하는 경우가 많습니다. Chromium는 favicon.ico에서 가장 가까운 내장 프레임을 자동으로 선택할 수 있습니다.

세 가지 일반적인 탭 크기(16, 32, 48)는 모두 단일 다중 크기 .ico 안에 편안하게 맞습니다. 이것이 바로 .ico 컨테이너가 가장 효율적인 데스크탑 전달 형식으로 남아 있는 이유입니다.

Windows 시작 메뉴, 작업 표시줄 핀 및 파일 탐색기 바로 가기는 상황 및 디스플레이 배율에 따라 24×24, 32×32, 48×48, 64×64, 128×128 또는 256×256을 요청할 수 있습니다.

Microsoft 문서 16, 24, 32, 48, 64, 128 및 256은 Windows 앱의 실제 세트입니다. 웹 favicon는 favicon.ico에 최소 16개부터 256개까지 번들로 묶는 것이 좋습니다.

macOS는 기본 앱의 경우 .icns를 선호하지만 웹 바로가기의 경우 .ico 및 PNG를 사용합니다. iOS는 홈 화면 아이콘에 대해 .ico를 무시하고 apple-touch-icon을 통해 전용 180×180 PNG를 원합니다.

웹 앱 매니페스트에는 목적이 임의이고 선택적으로 마스크 가능한 아이콘이 필요합니다. 일반적인 크기는 192×192 및 512×512 PNG입니다.

Android Chrome는 설치 UI 및 시작 화면에 매니페스트 아이콘을 사용합니다. 512×512 소스는 깔끔하게 축소됩니다. 192×192 전용 매니페스트는 고급 휴대폰에서는 부드러워 보입니다.

iOS는 홈 화면 배치를 위한 매니페스트 아이콘을 읽지 않습니다. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">를 선언해야 합니다.

16×16 — 브라우저 탭(1× 밀도). 32×32 — Retina 디스플레이의 탭 및 북마크. 48×48 — 일부 Windows UI 컨텍스트 및 레거시 북마크 사용.

64×64 및 128×128 — 더 높은 스케일링의 Windows 바로가기. 256×256 — Windows 고정 타일 및 높은 DPI 미리보기.

180×180 — 사과 터치 아이콘(iOS / iPadOS). 192×192 및 512×512 — Android 및 설치 프롬프트에 대한 PWA 매니페스트 아이콘.

개인 블로그: favicon.ico(16/32/48만). iOS 홈 화면 다듬기에 관심이 없다면 허용됩니다.

회사 마케팅 사이트: .ico 번들, 180×180 apple-touch-icon, 명시적 Retina 탭용 32×32 PNG <link>.

설치 가능 PWA: 전체 .ico, apple-touch-icon, 매니페스트 192 + 512, 확장 가능한 UI 크롬용 옵션 SVG.

Electron 데스크톱 앱: Windows .ico(16–256); 브라우저 외부에 배포하는 경우 macOS .icns를 별도로 사용합니다.

/favicon.ico의 다중 크기 favicon.ico(16, 32, 48, 64, 128, 256).

iOS 홈 화면의 경우 180×180의 apple-touch-icon.png입니다.

Android 설치 표면용 site.webmanifest에 512×512 PNG 1개.

이 세 가지가 실제 아이콘 요청의 약 95%를 차지합니다. 최신 탭에서 무한 확장 및 다크 모드 스타일을 원할 경우 SVG를 추가하세요.

.ico 내부에 16×16 PNG가 필요합니까? 아니요, 디버깅을 위해 명시적인 <link rel="icon" sizes="16x16">를 원하지 않는 한.

120×120이 여전히 필요합니까? 그것은 오래된 iOS 크기였습니다. 최신 Safari는 180×180을 예상합니다.

64×64 favicon는 어떻습니까? Windows에 대해 .ico 내부에서 유용합니다. 독립형 PNG로는 거의 필요하지 않습니다.

256×256을 건너뛸 수 있나요? Windows 높은 DPI 바로가기 미리보기에 전혀 관심이 없는 경우에만 가능합니다. 대부분의 팀이 이를 포함합니다.

iOS 아이콘은 모서리가 둥글고 잘려진 것처럼 보입니다. 즉, iOS 마스킹입니다. 파일에 버그가 있는 것이 아니라 안전한 패딩이 있는 디자인입니다.

PWA 설치에는 일반 아이콘이 표시됩니다. 매니페스트 아이콘이 누락되었거나 최소 192×192 미만입니다. Chrome DevTools → 애플리케이션을 사용하여 JSON을 검증합니다.

Retina Mac의 부드러운 탭 아이콘: favicon.ico에 16×16뿐만 아니라 32×32 프레임도 포함되어 있는지 확인하세요.

엄청난 .ico 다운로드: 압축되지 않은 256×256 BMP를 삽입했습니다. 컨테이너 내부에서 PNG 압축으로 다시 빌드합니다.

CSS 픽셀은 실제 픽셀이 아닙니다. 2× 디스플레이의 16×16 탭 슬롯은 선명도를 위해 32×32 비트맵을 로드하는 경우가 많습니다.

이것이 바로 16프레임과 32프레임을 모두 포함하는 favicon.ico가 Retina MacBook 및 높은 DPI Windows 노트북에서 단일 16×16 PNG보다 성능이 뛰어난 이유입니다.

Android PWAs는 전체 장치 해상도에서 스플래시 화면에 매니페스트 아이콘을 표시합니다. 1440p 전화기로 확장된 192×192 소스는 부드러워 보입니다. 512×512는 깔끔하게 축소됩니다.

iOS는 사과 터치 아이콘 자산에 자체 마스크와 모서리 반경을 적용합니다. 안전한 패딩으로 디자인하여 중요한 가장자리가 다람쥐에 의해 잘리지 않도록 합니다.

테스트할 때 100% 브라우저 확대/축소 및 200% OS 크기 조정에서 탭의 스크린샷을 찍습니다. 둘 다 선명해 보인다면 크기 매트릭스가 정확할 것입니다.

favicon.ico를 다운로드하고 포함된 프레임을 나열하는 도구에서 엽니다. 16, 32, 48과 하나 이상의 큰 크기 프레임이 있는지 확인합니다.

apple-touch-icon.png를 가져오고 이미지 검사기에서 크기를 확인하세요. 오래된 템플릿에서는 120×120이 아닌 180×180이 예상됩니다.

site.webmanifest를 열고 아이콘[]에 192×192 및 512×512가 포함되어 있고 올바른 경로와 이미지/png 유형이 있는지 확인하세요.

Chrome DevTools → Application → Manifest에서 사이트를 로드합니다. 누락되거나 잘못된 항목은 사용자에게 깨진 설치 대화 상자가 표시되기 전에 경고를 표시합니다.

각 파일을 해당 소비자(탭, iOS, PWA, Windows)에 매핑하는 스프레드시트를 유지합니다. 앞으로는 브랜드 변경 중에 자산 폴더를 리버스 엔지니어링할 필요가 없습니다.

favicon 랜드에서는 새로운 장치 클래스가 천천히 나타납니다. 현재 512×512 매니페스트 아이콘은 192보다 폴더블 및 태블릿 설치 UI를 더 잘 커버합니다.

특정 플랫폼 문서에서 요구하지 않는 한 이국적인 크기(96×96, 120×120)를 피하세요. 광범위한 이점 없이 저작 부담만 가중됩니다.

배송하지 않더라도 마스터 벡터 또는 1024×1024 래스터를 디자인 저장소에 저장하십시오. 향후 플랫폼에서는 더 큰 매니페스트 아이콘을 요청할 수 있습니다.

새로운 권장 크기가 나타나면 Photoshop에서 직접 내보내는 대신 스크립트를 다시 실행할 수 있도록 마스터에서 재생성을 자동화합니다.