새 SVG favicon을 프로덕션에 배포했습니다. Chrome 데스크톱에서는 완벽해 보였습니다. 그런데 Slack에서 한 사용자가 Safari iOS 스크린샷을 공유했는데, 탭에 빈 흰색 사각형이 표시됩니다. "내 컴퓨터에서는 잘 보인다"와 "어디서나 작동한다" 사이의 이 간극을 바로 favicon compatibility test가 메우기 위해 설계되었습니다.
favicon compatibility test는 단순한 시각적 확인 이상입니다. 브라우저, 운영체제, 검색 엔진이 실제로 favicon을 요청하는 모든 환경에 대해 아이콘 스택을 검증하는 체계적인 감사입니다. 일반적인 favicon tester와 진정한 compatibility test의 차이는 범위에 있습니다 — 형식, 크기, 컨텍스트, 렌더링 모드까지 포함합니다.
Favicon Compatibility Test가 실제로 확인하는 것
대부분의 개발자는 "compatibility"가 "표시되는가"를 의미한다고 생각합니다. 실제 compatibility는 최소 다섯 가지 차원을 포괄하며, 하나라도 빠지면 프로덕션에서 조용한 실패가 발생합니다:
- Format compatibility — SVG, PNG, ICO, 레거시 GIF는 브라우저마다 다르게 동작합니다.
- Resolution compatibility — 16x16, 32x32, 48x48, 96x96, 180x180, 192x192, 512x512는 각각 특정 컨텍스트를 대상으로 합니다.
- Context compatibility — 브라우저 탭, 주소 표시줄, 북마크 바, Pinned Tab, 홈 화면, Google 검색 결과.
- Theme compatibility — 라이트 모드, 다크 모드, Safari의 tinted 탭.
- Crawl compatibility — Googlebot이 안정적인 URL에서 아이콘 파일을 실제로 가져올 수 있는지 여부.
각 차원은 서로 다른 실패 모드를 가집니다. ICO 파일은 256KB를 초과하면 Safari에서 깨집니다. SVG favicon은 Chrome에서 단색으로 렌더링되지만, 올바르게 작성했을 때만 prefers-color-scheme을 존중합니다. WHATWG 명세는 명시적인 크기 힌트와 함께 rel='icon'을 정의하며, 브라우저는 이 힌트를 사용해 올바른 파일을 선택합니다(WHATWG HTML Living Standard).
Mzu favicondl로 Compatibility Test 실행하기
Mzu favicondl은 compatibility test를 단일 스크린샷이 아닌 계층화된 워크플로로 취급합니다. URL을 붙여넣으면 도구가 사이트가 노출하는 모든 아이콘 파일을 가져옵니다 — HTML <link> 태그, 루트 /favicon.ico, site.webmanifest, Apple Touch 참조까지 포함합니다. 그런 다음 브라우저가 실제로 사용하는 컨텍스트에서 각 파일을 검사할 수 있습니다.
테스트 워크플로는 세 단계로 구성됩니다:
- Inventory — 사이트가 제공하는 모든 아이콘 파일을 수집합니다. manifest에 숨겨진 파일도 포함합니다.
- Render check — 중요한 크기(16, 32, 48, 96, 180)에서 각 파일을 미리 봅니다.
- Format conversion — 스택의 빈틈을 채우기 위해 누락된 형식(SVG에서 ICO, ICO에서 PNG)을 생성합니다.
이 단계적 접근이 중요한 이유는 대부분의 compatibility 실패가 렌더링 버그가 아니라 누락된 파일이기 때문입니다. 사이트가 rel='icon' type='image/svg+xml'을 선언했지만 404를 반환하면 Safari에는 아이콘이 전혀 없게 됩니다. Mzu favicondl의 inventory 단계는 이러한 빈틈을 즉시 드러냅니다.
참조 HTML 스택
아래 compatibility matrix를 통과하는 최소 HTML link 태그 스택입니다. <head>에 배치하세요:
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='icon' href='/icon-96.png' sizes='96x96' type='image/png'>
<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>
<link rel='mask-icon' href='/safari-pinned.svg' color='#1a1a1a'>
<link rel='manifest' href='/site.webmanifest'>테스트해야 할 Compatibility Matrix
집중적인 favicon compatibility test는 출시된 모든 기기를 다룰 필요가 없습니다. 현대 브라우저가 실제로 사용하는 표면을 다루면 됩니다. 배포 전에 실행할 것을 권장하는 matrix는 다음과 같습니다:
| Context | Minimum File | Common Failure |
|---|---|---|
| Browser tab (Chrome, Firefox, Edge) | SVG or 32x32 PNG | Missing sizes attribute on link |
| Browser tab (Safari) | SVG or 32x32 PNG | ICO file exceeds 256KB |
| Address bar | 16x16 PNG or ICO entry | No multi-size ICO provided |
| Pinned Tab (Safari) | Monochrome SVG | Using full-color SVG instead |
| Add to Home Screen (iOS) | 180x180 PNG | Transparent background (iOS adds white) |
| Add to Home Screen (Android) | 192x192 + 512x512 maskable | Missing maskable safe zone |
| Google search result | Crawlable, square, ≥48x48 | CDN blocks Googlebot |
스택에 어느 행이든 빈틈이 있다면, 바로 그곳에서 compatibility test가 실패합니다. 해결책은 보통 단일 파일 변환이며, Mzu favicondl이 이 단계를 직접 처리합니다.
깨끗한 Compatibility 결과를 위한 Pro Tips
세 가지 패턴이 일관되게 compatibility test를 깨뜨리며, 모두 피할 수 있습니다.
같은 SVG를 다른 크기로 두 번 제공하지 마세요. <link rel='icon'>의 sizes 속성은 힌트이지 스위치가 아닙니다. SVG는 해상도 독립적이므로 브라우저는 SVG 파일에 대해 이 속성을 무시합니다. WHATWG 명세에 따라 확장 가능한 아이콘을 선언하는 올바른 방법은 sizes='any'를 추가하는 것입니다.
다크 모드는 배포 후가 아니라 배포 전에 테스트하세요. 투명 SVG 위의 검은 로고는 Chrome의 다크 탭 스트립에서 보이지 않습니다. Mzu favicondl을 사용하면 SVG를 라이트 및 다크 배경에 나란히 미리 볼 수 있습니다. 대비가 실패하면 SVG 자체 내부에 prefers-color-scheme 미디어 쿼리를 추가하세요.
항상 multi-size ICO를 포함하세요. 오늘날에도 루트 /favicon.ico 파일은 브라우저, 크롤러, 오래된 RSS 리더가 요청합니다. 16, 32, 48 픽셀 항목이 있는 multi-size ICO는 모든 레거시 컨텍스트를 하나의 파일로 커버합니다.
스택에 실제로 필요한 파일에 대한 더 자세한 체크리스트는 2026 favicon audit checklist를 참조하세요. 그리고 새 아이콘을 배포하기 전에 모든 브라우저 컨텍스트를 시각적으로 확인하고 싶다면, all-browsers favicon tester가 워크플로의 그 측면을 안내합니다.
마무리
favicon compatibility test는 노트북에서 아이콘이 렌더링되는지에 관한 것이 아닙니다. 모든 브라우저, OS, 검색 엔진, 렌더링 모드가 올바른 파일을 가져오고, 파싱하고, 표시할 수 있는지에 관한 것입니다. 이를 다섯 차원의 감사 — format, resolution, context, theme, crawl — 로 취급하면 추측이 체크리스트로 바뀝니다. Mzu favicondl은 inventory와 변환 파이프라인을 제공하며, 여러분의 역할은 배포 전에 matrix를 행별로 검토하는 것입니다.