파비콘 크기: 형식별 용도와 권장 규격

각 행은 권장 패키지에서 공식 문서로 확인되는 용도에 해당합니다. 오래된 변형을 모두 모으기보다 여러 환경에서 호환되는 간결한 구성을 제안합니다.

ICO는 컨테이너 형식입니다. 한 파일에 여러 이미지를 담으면 브라우저가 표시 환경에 맞는 이미지를 선택합니다. 환경에 따라 필요한 크기가 달라지므로 적합한 방식입니다.

16×16은 일반 화면의 탭에 쓰입니다. 32×32는 고밀도 화면과 다른 브라우저 인터페이스에 맞는 크기입니다. 48×48은 컨테이너 구성을 완성하며 Google이 검색 결과 파비콘에 대해 문서화한 48픽셀 배수 규칙에도 맞습니다.

16×16만 담은 .ico를 제공하는 것은 가장 흔한 실수입니다. Retina 화면에서는 아이콘이 확대되어 계속 흐릿하게 보입니다.

iOS는 홈 화면 아이콘을 위해 웹 매니페스트를 읽지 않고 apple-touch-icon 태그를 찾습니다. 최근 iPhone과 iPad를 지원하는 180×180 한 가지 크기면 충분합니다. 구형 기기에서는 시스템이 직접 축소합니다.

Android는 웹 매니페스트를 사용합니다. 홈 화면용 192×192와 사이트를 앱으로 설치했을 때 시작 화면에 사용할 512×512, 두 항목이면 충분합니다. 512 버전은 purpose를 maskable로 선언해야 합니다. 원이나 둥근 사각형으로 잘려도 알아볼 수 있도록 디자인했다는 의미입니다.

maskable 아이콘은 핵심 요소를 중앙 80% 영역 안에 배치하세요. 바깥 부분은 휴대폰 제조사에 따라 잘릴 수 있습니다.

가장 좋은 원본은 SVG입니다. 위의 모든 크기로 품질 손실 없이 조정할 수 있습니다. SVG가 없다면 최소 512×512픽셀의 정사각형 PNG를 사용하세요. Android 시작 화면 아이콘까지 확대 없이 축소만으로 만들 수 있습니다.

텍스트가 있는 가로형 로고는 16×16에서 적합하지 않습니다. 단어가 몇 픽셀의 뭉개진 형태가 되기 때문입니다. 심벌만 추출하거나 대비되는 배경 위에 한두 글자를 배치하세요.

마지막으로 밝은 배경과 어두운 배경 모두에서 대비를 확인하세요. 검정색 로고는 다크 테마 탭에서 보이지 않습니다. SVG 파비콘의 다크 모드용 이미지가 이 문제를 해결합니다.

오래된 생성기는 mstile-150x150.png와 browserconfig.xml을 쓰는 Windows 타일 같은 과거 기능용 파일도 생성합니다. 지원 대상에 해당 인터페이스가 명시되어 있을 때만 추가하세요.

apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152로 이어지는 긴 목록은 iOS가 크기를 조정하지 못하던 시절의 유산입니다. 이제 180×180 이미지 하나로 대체할 수 있습니다.

쓰지 않는 선언을 제거하면 저장소와 HTML이 간결해집니다. 기존 기능을 제거하기 전에 사이트의 지원 대상 브라우저와 플랫폼을 확인하세요.