Favicon ICO 멀티 사이즈 16 32 48: 개발자 가이드

사이트에 아름다운 512×512 아이콘을 업로드했는데도 브라우저 탭에는 여전히 흐릿한 이미지가 보입니다. 해결책은 더 큰 파일이 아니라 16, 32, 48픽셀 크기를 하나의 컨테이너에 담은 favicon ICO입니다.

이 단일 .ico 파일은 대부분의 개발자가 생각지 못하는 일을 합니다. 바로 브라우저에 각 상황에 필요한 정확한 픽셀 그리드를 제공하는 것이죠. 탭 스트립은 16×16을 원하고, Hi-DPI 디스플레이는 32×32를 원하며, Windows 작업 표시줄과 점프 목록은 48×48을 원합니다. 한 가지 크기만 제공하면 OS가 크기를 조정하는데, 보통 그 결과는 좋지 않습니다.

ICO 파일에서 '여러 크기'가 실제로 의미하는 것

ICO 파일은 이미지가 아니라 컨테이너입니다. 각각 고유한 크기 태그가 붙은 여러 PNG 또는 BMP 프레임을 담는 zip 아카이브라고 생각하면 됩니다. HTML 명세는 rel='icon'에서 아이콘 관계를 정의하며, 이는 브라우저가 이러한 리소스를 발견하고 요청하는 표준 방식입니다.

16, 32, 48 세 가지 크기를 하나의 파일에 묶으면 단일 HTTP 요청으로 브라우저에 세 가지 옵션을 제공합니다. 브라우저는 렌더링 컨텍스트에 가장 가까운 크기를 선택합니다. 크기 조정도, 앨리어싱도, 픽셀 뭉개짐도 없습니다.

왜 이 세 가지 크기인가?

각 숫자는 아이콘이 표시되는 실제 UI 표면에 대응합니다:

16×16 — 표준 DPI 디스플레이의 브라우저 탭과 북마크 바. 사용자가 90%의 시간 동안 응시하는 크기입니다. 여기서는 모든 픽셀이 중요합니다.
32×32 — Retina 및 Hi-DPI 탭, Chrome의 새 탭 페이지 바로가기, 대부분의 북마크 메뉴. 2× 디스플레이에서 OS는 선명한 렌더링을 위해 이 프레임을 샘플링합니다.
48×48 — Windows 작업 표시줄에 고정된 사이트, 시작 메뉴 타일, 데스크톱 바로가기 아이콘. Google도 검색 결과 favicon을 위해 이 범위에서 가져옵니다.

16을 건너뛰면 탭이 흐릿해집니다. 32를 건너뛰면 Retina 탭이 흐릿해집니다. 48을 건너뛰면 데스크톱 바로가기가 픽셀화됩니다. 이 세 가지 조합은 아무도 요청하지 않을 프레임에 바이트를 낭비하지 않으면서 가장 일반적인 세 가지 렌더링 컨텍스트를 커버합니다.

브라우저가 렌더링할 크기를 선택하는 방법

최신 브라우저는 ICO에 여러 크기가 포함되어 있을 때 예측 가능한 계층 구조를 따릅니다:

렌더링 표면과 일치하는 명시적 sizes 속성이 있는지 link 태그를 확인합니다.
ICO 컨테이너에서 대상 표면과 정확히 일치하는 크기의 프레임을 검색합니다.
정확히 일치하는 프레임이 없으면 사용 가능한 가장 큰 프레임을 선택하고 다운샘플링합니다.
최후의 수단으로 최근접 이웃 스케일링으로 대체합니다.

Chrome과 Firefox는 Hi-DPI 디스플레이에서 사용 가능한 가장 큰 프레임을 선호하고 다운샘플링합니다. Safari는 종종 정확한 픽셀 일치를 선택합니다. 그래서 16, 24, 64를 포함한 파일보다 정확히 16, 32, 48을 포함한 파일이 브라우저 전반에서 더 선명하게 보입니다. 브라우저가 크기를 다시 조정할 일이 거의 없기 때문입니다.

16픽셀 제약에 맞춰 디자인하기

16×16 아이콘은 브랜드를 전달할 수 있는 256픽셀을 제공합니다. 매우 가혹하죠. 비결은 실루엣 우선, 디테일은 절대 금지입니다:

그라디언트를 제거하세요 — 이 크기에서는 노이즈로 변합니다.
그리드에 정렬된 1픽셀 스트로크를 사용하세요 (0.5px 서브픽셀 렌더링은 피하세요).
글자 형태는 단일 문자나 단순한 기하학적 마크로 유지하세요.
눈을 가늘게 뜨고 테스트하세요 — 모양이 사라지면 더 단순화하세요.

32와 48 크기는 더 관대하지만, 다른 그림이 아니라 더 높은 충실도의 동일한 아이콘처럼 보여야 합니다. 16×16 디자인으로 시작해서 확대하세요 — 32 버전에 새로운 디테일이 필요하다면 16 디자인이 처음부터 너무 빈약했을 가능성이 큽니다.

컨테이너 만들기: 실용적인 패턴

Mzu favicondl의 다중 크기 ICO 빌더를 포함한 대부분의 최신 도구를 사용하면 하나의 고해상도 PNG를 업로드하고 선택한 크기의 컨테이너를 내보낼 수 있습니다. 최소한의 HTML 설정은 다음과 같습니다:

&lt;link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icon.svg'&gt;
&lt;link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'&gt;

sizes 속성은 힌트일 뿐 필수 사항이 아닙니다 — 브라우저는 ICO 내부의 실제 프레임을 파싱하여 가장 적합한 것을 선택합니다. 이 속성을 포함하면 유효성 검사기와 접근성 도구가 의도를 확인하는 데 도움이 됩니다.

피해야 할 일반적인 함정

경험 많은 개발자도 빠지는 몇 가지 실수가 있습니다:

32×32만 제공 — Retina에서는 괜찮아 보이지만 표준 탭에서는 끔찍합니다.
크기가 하나뿐인 ICO 사용 — 컨테이너 형식의 목적을 무색하게 합니다.
48×48 생략 — Windows 고정 사이트의 충실도를 깨뜨립니다.
손실 코덱으로 프레임 압축 — ICO 프레임은 무손실 PNG 또는 BMP로 유지해야 합니다.

파일을 만든 후 파일 크기를 줄이는 방법에 대한 자세한 내용은 favicon ICO 크기 최적화 가이드를 참조하세요.

정리하며

16, 32, 48 조합은 임의적이지 않습니다 — 가장 중요한 세 가지 렌더링 표면(표준 탭, Hi-DPI 탭, 데스크톱 작업 표시줄)에 직접 대응합니다. 이 세 가지 크기를 하나의 ICO에 담으면 단일 HTTP 요청으로 실제 favicon 요청의 약 95%를 커버할 수 있습니다. 최신 브라우저를 위한 SVG 폴백과 iOS를 위한 Apple Touch Icon을 추가하면, OS가 던지는 어떤 상황에도 사이트 아이콘이 준비됩니다.