Chrome에서 새 탭을 열면 페이지 로고 대신 작은 회색 지구본이 보입니다. 자리 표시자처럼 보이지만 실제로 그 자체가 자리 표시자입니다. Chrome 기본 favicon 지구본 아이콘은 Chrome이 페이지의 유효한 아이콘을 찾거나 불러오지 못할 때 사용하는 대체 아이콘입니다.

이 글에서는 이 지구본 아이콘이 무엇을 의미하는지, Chrome이 왜 이를 선택하는지, 그리고 직접 만든 favicon으로 교체하는 방법을 설명합니다. 일반적인 캐시 문제 해결에 범위를 넓히지 않고 지구본 아이콘 자체에 집중하겠습니다.

Chrome 기본 favicon 지구본 아이콘의 정체

Chrome은 모든 사이트에 하나의 고정된 지구본 아이콘을 적용하지 않습니다. 이 지구본은 사용할 수 있는 아이콘이 없을 때 나타나는 일반적인 자리 표시자이며, 탭 바에서 빈 슬롯이 표시되는 것과 같은视觉效果입니다.

HTML 표준은 문서의 head에서 페이지 아이콘을 선언하는 방법을 정의합니다. 바로 <link rel='icon'> 요소입니다. 관련 규격은 WHATWG HTML: rel=icon에서 확인할 수 있습니다. 이 선언이 없거나 잘못되어 있거나, Chrome이 해석할 수 없는 파일을 가리키면 브라우저는 지구본 아이콘으로 대체합니다.

내 아이콘 대신 지구본이 표시되는 이유

대부분의 경우에는 몇 가지 예측 가능한 원인이 있습니다.常见되는 사례는 다음과 같습니다.

이 원인 중 어느 것도 캐시를 심층적으로 조사해야 한다는 뜻은 아닙니다. 지구본 아이콘은 보통 처음부터 아이콘을 올바르게 확인하거나 가져오지 못했다는 신호입니다.

Chrome이 페이지 아이콘과 지구본 중 선택하는 방식

Chrome은 문서의 head에 있는 아이콘 링크를 읽고, 해석할 수 있는 후보를 선택합니다. SVG와 PNG를 모두 제공하면 브라우저는 가장 잘 지원하는 형식을 사용합니다. 모든 후보가 실패하면 지구본 아이콘이 표시됩니다.

최소한으로 안정적인 선언은 다음과 같습니다.

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png'>

이렇게 설정하면 Chrome이 아이콘을 가져올 기회를 두 번 갖게 됩니다. link element의 구조를 더 자세히 알아보려면 favicon link tag 가이드를 참고하세요.

globe 표시를 없애는 권장 설정

globe를 없애기 위해 파일을 dozen 개까지 준비할 필요는 없지만, 유효하고 접근 가능한 아이콘이 최소 하나는 있어야 합니다. 다음 실무 지침을 적용해 보세요.

  1. root에 대한 암묵적 요청에 의존하지 말고, head에서 아이콘을 명시적으로 선언하세요.
  2. 파일이 실제로 HTTP 200을 반환하는지 확인하세요. HTML 오류 페이지로 redirect되지 않아야 합니다.
  3. 오래된 parser나 엄격한 parser에서도 동작하도록 SVG와 함께 PNG fallback을 유지하세요.
  4. 새 Chrome 프로필 또는 incognito window에서 테스트해, 기존에 캐시된 globe 때문에 혼란되지 않도록 하세요.

아이콘을 올바르게 선언했는데도 Chrome에 globe가 계속 표시된다면, 원인은 파일 누락보다 오래된 캐시 항목일 때가 많습니다. Chrome에서 favicon이 표시되지 않는 문제에서 이러한 캐시 동작을 자세히 다룹니다.

결론

globe는 버그가 아닙니다. Chrome이 사용할 수 있는 아이콘을 찾지 못했다는 뜻입니다. 유효한 rel='icon' link를 선언하고 파일이 올바르게 제공되는지 확인하면 globe가 사라집니다. 먼저 정상 작동하는 SVG나 PNG 하나로 시작하고, 기본 설정이 자리 잡은 뒤 전체 icon set으로 확장하세요.