Safari에서 사이트를 열어 탭을 살펴보면 로고 대신 기본 지구본이나 빈 사각형이 보입니다. 이런 일이 익숙하다면 Safari에서 favicon이 표시되지 않는 문제를 겪고 있는 것입니다. 흔한 문제이며 원인이 될 만한 요인도 몇 가지에 불과합니다. 다행히 대부분의 해결책은 1분도 걸리지 않습니다.

빠른 해결책: Safari가 아이콘을 다시 가져오도록 강제하기

Safari는 favicon을 강하게 캐시합니다. 코드를 변경하기 전에 다음 단계를 순서대로 시도해 보세요.

  1. Safari의 favicon 캐시 지우기: 캐시를 비웁니다(Safari > Settings > Privacy > Manage Website Data). 이후 해당 사이트를 삭제합니다. iOS에서는 Settings > Safari > Clear History and Website Data로 이동합니다.
  2. Hard reload(강력 새로고침): Mac에서는 Cmd+Option+R로 페이지를 다시 불러오거나, 탭을 닫았다가 다시 엽니다.
  3. favicon URL 직접 확인: 새 탭에서 URL을 직접 열어 보세요. 예를 들어 https://yoursite.com/favicon.ico입니다. 404 오류가 발생하면 파일 경로가 잘못된 것입니다.

아이콘이 여전히 표시되지 않으면 아래의 근본 원인을 살펴보세요.

Safari에서 favicon이 표시되지 않는 근본 원인

1. 누락되었거나 잘못된 <link> 태그

Safari는 아이콘 링크에 대한 HTML spec을 따르지만, 일부 브라우저보다 엄격합니다. <link rel='icon'> 태그가 <head> 안에 있고, 존재하는 파일을 가리키는지 확인하세요. WHATWG spec은 rel='icon'을 페이지와 아이콘을 연결하는 표준 방법으로 정의합니다.

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

참고: macOS의 Safari는 PNG를 지정했더라도 루트에서 /favicon.ico를 요청할 수 있습니다. fallback을 위해 루트 디렉터리에 유효한 favicon.ico를 유지하세요.

2. 지원되지 않는 형식 또는 손상된 파일

Safari는 ICO, PNG, SVG를 지원합니다(Safari 12부터). 다만 SVG는 well-formed XML이어야 합니다. 태그 하나가 닫히지 않으면 Safari가 SVG를 무시하게 됩니다. SVG를 사용한다면 XML parser로 검증하세요. 더 넓은 호환성을 위해 PNG 또는 ICO를 사용하세요.

3. 서버 또는 CDN 수준의 캐싱

favicon을 최근에 업데이트했다면 Safari가 캐시 또는 CDN에 저장된 오래된 사본을 제공할 수 있습니다. 캐시를 무효화하려면 URL에 버전 쿼리 문자열을 추가하세요(예: favicon.png?v=2). 자세한 내용은 Safari에서 favicon 캐시 지우는 방법을 참고하세요.

4. iOS 홈 화면 아이콘이 표시되지 않는 경우

iPhone과 iPad의 홈 화면 아이콘은 일반 favicon이 아니라 apple-touch-icon에서 제공됩니다. 이 아이콘이 없으면 iOS는 스크린샷 또는 회색 정사각형을 표시합니다. rel='apple-touch-icon'으로 연결된 180×180 PNG 파일이 있는지 확인하세요.

예방 팁

대부분의 Safari favicon 문제는 캐싱, 잘못된 경로 또는 유효하지 않은 파일에서 비롯됩니다. 먼저 빠른 해결 방법을 적용한 다음 HTML과 파일 형식을 확인하세요. 설정이 올바르면 탭, 북마크 및 즐겨찾기에서 아이콘이 안정적으로 표시됩니다.