Favicon 폴백 전략: 안정적인 아이콘 스택 구축

선명한 SVG favicon을 프로덕션에 배포하고 탭을 새로 고침하면 Chrome에서는 또렷하게 표시됩니다. 그런데 같은 사이트를 Safari에서 열면 텅 빈 문서 아이콘만 보입니다. 문제는 SVG 자체가 아니라 그 뒤에 숨겨진 폴백 체인이 비어 있기 때문입니다.

Favicon 폴백 전략이란 모든 브라우저, 탭, 기기에서 인식 가능한 이미지가 표시되도록 함께 배포하는 아이콘 파일과 HTML link 태그의 계층 구조를 말합니다. 단일 포맷에 올인을 하는 대신 일련의 순서를 제공해, 브라우저가 첫 번째로 매칭되는 항목을 시도하고, 그것이 실패하면 다음 항목으로 넘어가도록 만드는 방식입니다.

Favicon 폴백 전략이란 무엇인가?

이는 <head> 안에 여러 아이콘 포맷을 의도적으로 정렬한 것과 그 태그들이 가리키는 파일들을 함께 가리킵니다. 각 계층이 존재하는 이유는 바로 그上一层으로는 부족하기 때문입니다. 구형 브라우저는 SVG를 건너뛰고, 레티나 탭에서는 16×16 PNG가 흐릿하게 보이며, 모바일 홈 화면은 래스터 ICO를 거부합니다. 전략이란 "이 파일이 실패하면 어떻게 될 것인가"라는 질문이 실제로 터지기 전에 미리 답을 마련해 두는 일입니다.

브라우저가 폴백 체인을 필요로 하는 이유

어떤 단일 아이콘 포맷도 모든 사용 맥락을 포괄하지 못합니다. SVG는 확장성이 뛰어나지만 모든 레거시 브라우저가 이를 요청하지는 않습니다. PNG는 거의 모든 환경에서 동작하지만 여러 해상도를 한 파일로 묶을 수는 없습니다. ICO는 브라우저가 여전히 /favicon.ico 경로로 조회하는 레거시 컨테이너 포맷이며, HTML 힌트 없이 모든 데스크톱 브라우저가 이해하는 유일한 포맷으로 남아 있습니다.

포맷을 넘어서 아이콘이 등장하는 장소도 다양합니다. 브라우저 탭, 북마크 바, 고정 탭, 모바일 홈 화면, 새 탭 페이지 바로가기, Google 검색 결과, PWA 설치 대화상자까지 각기 다른 표면이 존재합니다. 각 표면은 고유한 크기 요구 사항, 색상 규칙, 파일 포맷 선호도를 갖습니다. 전략이란 16×16 탭만이 아니라 이 모든 표면을 함께 다루는 것을 뜻합니다.

브라우저의 아이콘 선택 동작 방식

HTML 명세는 브라우저가 <link rel='icon'> 태그들로부터 아이콘을 고르는 방식을 정의합니다. 브라우저는 태그 목록을 순서대로 훑으며 type, sizes, media 속성을 기준으로 가장 적합한 항목을 선택합니다. 만약 매칭되는 항목이 없다면 WHATWG link relation 명세에 문서화된 레거시 /favicon.ico 요청으로 폴백합니다.

이 명세에서 다음과 같은 두 가지 실무적 규칙이 도출됩니다.

순서가 중요하다. 가장 표현력이 뛰어난 파일(SVG)을 먼저 두고, 덜 표현력 있는 파일이 그 뒤를 따릅니다. 태그가 유효하지 않을 경우에만 브라우저가 앞을 건너뜁니다.
type 속성은 힌트일 뿐 게이트가 아니다. 브라우저가 image/svg+xml을 파싱하지 못하면 바로 포기하지 않고 다음 아이콘을 요청합니다.

복원력 있는 스택 설계하기

완전한 전략은 일반적으로 네 개의 계층을 포함합니다. 각 계층은 바로 위 계층이 채우지 못한 공백을 메웁니다.

1. 모던: SVG (선택적으로 다크 모드 media query 포함)

SVG는 레티나 디스플레이에서 완벽하게 확대되며, 파일 내부에서 prefers-color-scheme media query를 지원합니다. SVG를 이해하는 브라우저가 즉시 이를 선택할 수 있도록 <head> 안에서 가장 먼저 배치합니다.

2. 범용: 32×32와 96×96 PNG

PNG는 SVG를 무시하는 브라우저를 위한 안전망입니다. 32×32(탭과 북마크용)와 96×96(고밀도 디스플레이와 Google이 권장하는 최소 크기)을 함께 제공하면 대부분의 데스크톱 시나리오를 커버할 수 있습니다. 크기 결정에 대한 더 깊은 논의는 Favicon Sizes Guide를 참고하시기 바랍니다.

3. 레거시: 16, 32, 48 해상도를 함께 담은 ICO

많은 브라우저가 link 태그와 무관하게 사이트 루트의 /favicon.ico를 자동으로 요청합니다. 다중 해상도 ICO 파일은 이러한 암묵적 요청을 만족시켜주며, 그렇지 않을 경우 로그에 쌓이게 될 콘솔 404를 방지합니다. 포맷 세부 사항은 ICO file format guide에서 다루고 있습니다.

4. 플랫폼별: Apple Touch, manifest, Safari 고정 탭

iOS 홈 화면은 투명도가 없는 180×180 PNG를 원합니다. Android는 manifest에 192와 512 해상도 항목을 요구합니다. Safari 고정 탭은 단색 SVG를 기대합니다. 이 어느 것도 폴백 체인을 대체하지 않으며, 그 체인을 확장하는 역할을 합니다.

최소한의 HTML 패턴

&lt;link rel='icon' href='/icon.svg' type='image/svg+xml'&gt;
&lt;link rel='icon' href='/icon-96.png' sizes='96x96' type='image/png'&gt;
&lt;link rel='icon' href='/icon-32.png' sizes='32x32' type='image/png'&gt;
&lt;link rel='icon' href='/favicon.ico' sizes='any'&gt;
&lt;link rel='apple-touch-icon' href='/apple-touch-icon.png'&gt;
&lt;link rel='mask-icon' href='/safari-pinned.svg' color='#000000'&gt;

이 배열의 순서가 의도적임을 주목하시기 바랍니다. SVG가 가장 먼저(모던 브라우저용), PNG가 그 다음(범용), ICO가 가장 마지막(레거시 캐치올)으로 배치되어 있습니다. 각 태그는 앞선 태그가 무시되더라도 자연스럽게 저하됩니다.

흔히 저지르는 실수

ICO 파일을 누락하는 경우. 일부 브라우저는 link 태그와 무관하게 여전히 /favicon.ico를 조회합니다.
단일 PNG 크기만 제공하는 경우. 16×16 PNG는 레티나 탭에서 흐릿하게 보이며 Google이 권장하는 최소 크기에도 미치지 못합니다.
순서를 뒤집는 경우. PNG를 SVG보다 앞에 두면, Chrome이 SVG를 기꺼이 사용함에도 불구하고 래스터 파일을 먼저 불러오게 됩니다.
캐시 무효화를 잊는 경우. 구형 브라우저는 favicon을 적극적으로 캐시합니다. 표준 쿼리 스트링 트릭에 대해서는 favicon cache-busting guide를 참고하시기 바랍니다.

체인 검증하기

전략의 가치는 검증 절차를 통해 비로소 드러납니다. DevTools를 열고 네트워크 패널을 img로 필터링한 뒤, 실제로 브라우저가 원하는 파일을 요청하는지 확인합니다. Mzu favicondl과 같은 도구를 사용하면 배포된 사이트를 점검해 SVG, PNG, ICO, manifest, Apple Touch 등 사이트가 노출하고 있는 모든 아이콘을 나열해주므로, 사용자가 문제를 발견하기 전에 누락된 계층을 사전에 찾아낼 수 있습니다.

목표는 단일 브라우저에서의 완벽함이 아닙니다. 목표는 모든 브라우저, 모든 표면, 모든 상황에서 인식 가능한 아이콘이 표시되는 것입니다. 그것이 진정한 폴백 전략이 제공하는 가치입니다.