Chrome을 열고 사이트에 접속했는데 탭에 아이콘 대신 기본 지구본이나 빈 사각형이 표시된다면, HTML을 확인하고 파일도 존재하는데도 Chrome이 계속 아이콘을 표시하지 않는 상황일 것입니다. 이는 개발자들이 가장 흔히 겪는 favicon 문제 중 하나입니다. 다행히도 대부분의 경우 해결 방법은 2분도 걸리지 않습니다.

빠른 해결: 강력 새로고침으로 강제 갱신하고 Network 탭 확인하기

코드를 건드리기 전에 가장 간단한 원인부터 배제하세요. Chrome이 이전 favicon의 캐시된 버전(또는 캐시된 404)을 제공하고 있을 수 있습니다. Chrome은 favicon을 매우 적극적으로 캐시하며, 때로는 며칠 동안 유지합니다.

  1. Chrome에서 사이트를 엽니다.
  2. DevTools를 엽니다(F12 또는 Cmd+Option+I).
  3. Network 탭으로 이동하여 Disable cache를 체크합니다.
  4. 강력 새로고침(Ctrl+Shift+R 또는 Cmd+Shift+R)으로 페이지를 다시 로드합니다.
  5. Network 필터 상자에 favicon을 입력합니다.

favicon.ico 요청이 404를 반환하는 경우 Chrome은 계속 기본 지구본을 표시합니다. 200이 반환되는데도 아이콘이 업데이트되지 않는다면 캐시된 이미지가 문제입니다. 강력 새로고침으로 보통 해결됩니다. 그래도 안 되면 chrome://settings/clearBrowserData를 열고 Cached images and files를 선택하여 지웁니다. 이렇게 하면 비밀번호나 방문 기록을 건드리지 않고 Chrome의 favicon 캐시만 지울 수 있습니다.

근본 원인 1: Chrome이 favicon.ico를 요청하는데 사이트에 파일이 없는 경우

<link rel='icon'> 태그를 작성한 적이 없어도 Chrome은 도메인 루트에서 /favicon.ico를 요청합니다. 이는 Internet Explorer 시절부터 이어진 레거시 동작이며 아직도 HTML 명세에 포함되어 있습니다. 해당 파일이 없으면 404가 발생하고 기본 지구본이 표시됩니다.

해결 방법은 간단합니다. 도메인 루트에 실제 favicon.ico를 두거나 <head>에 명시적인 link 태그를 추가하세요:

<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

HTML 명세는 rel='icon'을 페이지에 아이콘을 연결하는 표준 방법으로 정의합니다. Chrome은 발견한 첫 번째 유효한 아이콘을 사용하지만, SVG와 ICO 폴백을 모두 제공하는 것이 가장 안전한 패턴입니다.

근본 원인 2: link 태그가 잘못된 위치에 있거나 구문 오류가 있는 경우

Chrome은 <head> 내부의 favicon link 태그만 읽습니다. 태그가 <body>에 들어간 경우(템플릿 파셜이나 CMS 인젝터에서 흔함) Chrome은 이를 조용히 무시합니다. 콘솔 오류도, 경고도 없이 그저 아이콘이 사라집니다.

다음과 같은 흔한 실수를 확인하세요:

태그가 유효한지 확실하지 않다면 Chrome에서 페이지 소스 보기(Ctrl+U)를 열고 rel=을 검색하세요. 태그는 body 콘텐츠 앞, head 블록 안에 나타나야 합니다.

근본 원인 3: 파일이 잘못된 MIME 타입으로 제공되거나 손상된 경우

Chrome은 이미지 파일에 엄격합니다. 서버가 .ico 파일을 text/plain이나 application/octet-stream으로 반환하면 Chrome이 렌더링을 거부할 수 있습니다. DevTools에서 확인할 수 있습니다: Network 탭에서 favicon 요청을 클릭하고 Response Headers를 확인하세요.

올바른 MIME 타입은 다음과 같습니다:

Apache에서는 .htaccess에 AddType image/x-icon .ico를 추가하세요. Nginx에서는 서버 블록 내에 types { image/x-icon ico; }를 사용하세요. 관리형 호스팅이나 CDN을 사용 중이라면 해당 문서를 확인하세요. 일부는 기본적으로 MIME 타입을 제거하거나 재정의합니다.

근본 원인 4: 잘못된 마크업의 SVG favicon

SVG favicon은 깔끔하게 확장되고 다크 모드를 지원하기 때문에 점점 더 흔해지고 있습니다. 하지만 Chrome의 SVG 파서는 관대하지 않습니다. 네임스페이스 누락, 닫히지 않은 태그, 잘못된 HTML 엔티티 하나만 있어도 전체 파일이 거부되고 Chrome은 기본 지구본으로 대체합니다.

SVG를 브라우저 탭에서 직접 열어 유효성을 검사하세요. 이미지로 렌더링되면 마크업이 정상입니다. 원시 XML이나 오류가 보이면 favicon 태그를 걱정하기 전에 SVG를 수정하세요. 또한 SVG 루트 요소에 xmlns='http://www.w3.org/2000/svg'가 있는지 확인하세요.

예방: Chrome이 무시할 수 없는 favicon 스택 구축하기

가장 안정적인 설정은 여러 형식을 결합하여 Chrome이 항상 유효한 폴백을 갖도록 하는 것입니다. 최소한의 현대적인 스택은 다음과 같습니다:

이 모든 파일은 Mzu favicondl을 사용하여 단일 소스 이미지에서 생성할 수 있습니다. 배포 후 Network 탭에서 각 파일이 200 상태로 로드되는지 확인하세요.

Chrome 특유의 캐싱과 localhost 관련 문제에 대한 더 자세한 설명은 Chrome에서 favicon이 표시되지 않는 문제 가이드를 참조하세요. 그리고 favicon이 제대로 제공되고 있는지조차 확실하지 않다면 favicon 감사 가이드의 점검 사항을 따라 해보세요.

아무것도 해결되지 않을 때 할 일

캐시를 지우고, link 태그를 수정하고, MIME 타입을 확인했는데도 Chrome이 여전히 빈 탭을 표시한다면 다음 마지막 단계를 시도해 보세요:

  1. Chrome 시크릿 창에서 테스트합니다(확장 프로그램과 프로필 캐시가 우회됨).
  2. 다른 브라우저(Firefox 또는 Edge)에서 테스트하여 파일이 제대로 제공되는지 확인합니다.
  3. 서비스 워커가 favicon 요청을 가로채서 오래된 응답을 반환하는지 확인합니다.
  4. 아이콘 도메인에 대한 img-src를 차단하는 Content Security Policy 헤더가 있는지 확인합니다.

시크릿 창에서는 아이콘이 나타나지만 일반 프로필에서는 나타나지 않는다면 문제는 100% 로컬 캐시이며 서버 문제가 아닙니다. 모든 곳에서 실패한다면 문제는 HTML, 파일 경로 또는 서버 구성에 있습니다.

Chrome이 웹사이트의 favicon을 표시하지 않는 문제는 거의 항상 네 가지 중 하나입니다: 루트 favicon.ico 누락, 잘못 배치되거나 형식이 잘못된 link 태그, 잘못된 MIME 타입, 또는 캐시된 404. 이 순서대로 해결하면 커피가 식기 전에 탭에 아이콘을 되찾을 수 있습니다.