프론트엔드 사이트 파비콘 완전 설정 사양 가이드

표준 ICO 파일은 단일 컨테이너에 여러 크기의 비트맵을 내장할 수 있으며, 일반적인 설정은 16×16, 32×32, 48×48 세 가지 크기를 포함합니다. 사용 시나리오마다 자동으로 해당 크기가 매칭됩니다: 16×16은 브라우저 탭 바에 사용되고, 32×32는 북마크 바, 48×48은 데스크톱 바로가기에 사용됩니다.

ICO 파일의 다중 크기 저장은 ICO 형식 사양을 따르며, 각 크기는 독립적인 비트맵 데이터 블록에 대응됩니다. 브라우저는 현재 렌더링 시나리오에 따라 해당 크기의 비트맵을 읽으므로 여러 개의 독립 파일을 생성할 필요가 없습니다. 구형 IE 브라우저는 ICO 형식의 파비콘만 읽는 것을 지원하므로 루트 디렉토리에 favicon.ico를 유지하면 구 버전의 접근과 호환됩니다.

Chrome, Firefox, Edge 등 최신 브라우저는 모두 PNG 형식의 파비콘을 지원합니다. 선언 방식은 link 태그를 사용해 해당 size 속성을 추가하며, 핵심 설정은 32×32와 192×192 두 가지 사양이 필요합니다. 32×32는 최신 브라우저의 고해상도 탭 바 렌더링에 매칭되고, 192×192는 Android의 네이티브 PWA 애플리케이션 아이콘에 사용됩니다.

표준 선언 코드는 <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 와 <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> 입니다. 브라우저는 시나리오에 따라 자동으로 해당 크기를 선택해 로드합니다.

일부 최신 브라우저는 SVG 형식의 파비콘을 지원합니다. SVG는 내장된 미디어 쿼리를 통해 다른 테마에서 색상 적응을 구현할 수 있어 시스템 다크 모드 전환에 적응합니다. SVG 적응의 원리는 SVG 코드에 prefers-color-scheme 미디어 쿼리를 추가하고 라이트 모드와 다크 모드에서의 아이콘 채우기 색상을 각각 정의하는 것입니다.

SVG 파비콘을 선언할 때는 type="image/svg+xml"을 사용해 파일 형식을 지정합니다. 기존 ICO와 PNG보다 우선순위가 높아 브라우저가 먼저 SVG 형식을 로드합니다. 개발자는 SVG to ICO 변환기를 사용해 편집된 적응 완료된 SVG를 ICO 형식으로 변환하면 더 많은 접근 시나리오와 호환할 수 있습니다.

Apple iOS는 홈 화면에 추가된 웹 페이지에 전용 아이콘인 apple-touch-icon을 제공합니다. 현재 사양은 180×180 PNG 아이콘을 요구합니다. 초기 버전은 여러 다른 크기의 선언을 지원했으나, iOS 12 이후 버전은 모든 Apple 기기 매칭을 위해 180×180 크기를 우선순위로 처리합니다.

표준 선언 코드는 <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> 입니다. size 속성을 추가할 필요가 없으며, iOS 시스템이 자동으로 180×180 크기를 인식해 적응합니다. 둥근 모서리와 하이라이트 효과는 iOS 시스템이 자동으로 처리하므로 개발자가 미리 둥근 모서리를 처리할 필요가 없습니다.

PWA 애플리케이션은 기본 애플리케이션 정보를 선언하기 위해 manifest.json 파일을 설정해야 하며, 해당 크기의 아이콘 필드를 포함해야 합니다. PWA 설치 요구 사항을 충족하려면 512×512 애플리케이션 아이콘을 선언해야 합니다. theme-color는 meta 태그와 manifest 모두에 선언해야 하며, 브라우저 주소 표시줄의 테마 색상 매칭에 사용됩니다.

완전한 설정을 위해 <meta name="theme-color" content="#ffffff">를 추가하고, manifest.json에 같은 이름의 필드를 추가하며 meta 태그와 값을 일치시켜 서로 다른 브라우저의 주소 표시줄 렌더링 로직에 적응시킵니다.