웹사이트에 favicon을 추가했지만, 브라우저 탭에 나타나지 않습니까? 답답하시죠? 가장 가능성이 높은 것부터 낮은 순서로, 가장 흔한 7가지 원인과 해결 방법을 살펴보겠습니다.
1. 브라우저 캐시 (가장 흔함)
favicon은 브라우저에서 다른 어떤 것보다 훨씬 적극적으로 캐시됩니다. 파일을 업데이트한 후에도 브라우저는 몇 시간 또는 며칠 동안 이전 아이콘(또는 아이콘 없음)을 표시할 수 있습니다.
해결 방법:
- 하드 새로고침:
Ctrl+Shift+R(Windows/Linux) 또는Cmd+Shift+R(Mac) - 시크릿/개인 모드에서 열기
- 브라우저 캐시 지우기:
설정 → 개인 정보 보호 → 인터넷 사용 기록 삭제 → 캐시된 이미지 및 파일 - 캐시 무효화 쿼리 문자열 추가:
href="/favicon.ico?v=2"
2. 잘못된 파일 경로
가장 흔한 코딩 오류입니다. 경로가 올바르지 않아 브라우저가 favicon 파일을 찾을 수 없습니다.
해결 방법:
/로 시작하는 절대 경로를 사용하세요:href="/favicon.ico"- 브라우저에서
https://yoursite.com/favicon.ico를 직접 열어보세요 — 아이콘이 보이나요? - 파일 이름의 오타를 확인하세요 (예:
favicon.icovsFavicon.ico— Linux 서버에서는 대소문자를 구분합니다)
3. HTML 태그 누락 또는 오류
<link> 태그가 누락되었거나, 형식이 잘못되었거나, <head> 외부에 배치되었을 수 있습니다.
해결 방법: 다음 코드가 <head> 태그 안에 있는지 확인하세요:
<link rel="icon" type="image/x-icon" href="/favicon.ico">흔한 실수:
rel="shortcut icon"사용 — 여전히 지원되지만,rel="icon"이 표준입니다type속성 누락 —type="image/x-icon"또는type="image/png"를 추가하세요- link 태그를
<head>대신<body>에 배치
4. 손상되었거나 유효하지 않은 파일
파일이 컴퓨터에서는 정상적으로 보일 수 있지만, 손상되었거나 잘못된 형식일 수 있습니다.
해결 방법:
- 파일이 유효한 ICO/PNG인지 확인하세요 — 이미지 뷰어에서 열어보세요
- JPEG 파일을 단순히
.ico로 이름만 바꾸지 마세요 — 그렇게 한다고 형식이 변환되지 않습니다 - Mzu favicondl의 Image to Favicon과 같은 적절한 도구를 사용하여 다시 생성하세요
5. 서버가 올바른 MIME 타입을 제공하지 않음
일부 서버는 .ico 파일을 인식하지 못하고 잘못된 Content-Type 헤더로 제공할 수 있습니다.
해결 방법: DevTools (네트워크 탭)에서 응답 헤더를 확인하세요. MIME 타입은 다음과 같아야 합니다:
.ico→image/x-icon또는image/vnd.microsoft.icon.png→image/png.svg→image/svg+xml
Apache의 경우, .htaccess에 다음을 추가하세요:
AddType image/x-icon .icoNginx의 경우:
location ~* \.ico$ {
add_header Content-Type image/x-icon;
}6. HTTPS / 혼합 콘텐츠 문제
사이트가 HTTPS를 사용하는데 favicon URL이 HTTP를 사용하면 브라우저가 이를 자동으로 차단합니다.
해결 방법:
- 프로토콜 상대 경로를 사용하세요:
href="/favicon.ico"(http://또는https://없음) - 또는 명시적으로 HTTPS를 사용하세요:
href="https://yoursite.com/favicon.ico"
7. Google 검색 결과에 favicon이 표시되지 않음
브라우저 탭에는 favicon이 나타나지만 Google 검색 결과에는 나타나지 않습니다. 이는 별개의 문제입니다.
Google의 favicon 요구사항:
- favicon URL은 크롤링 가능해야 합니다 (
robots.txt에 의해 차단되지 않아야 함) - 크기는 48px의 배수여야 합니다 (예: 48×48, 96×96, 144×144)
- 정사각형 이미지여야 합니다
- Google은 부적절하거나 품질이 낮다고 판단하는 favicon을 표시하지 않습니다
- 새로운 favicon이 Google에 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다
해결 방법: Google Search Console의 URL 검사 도구를 사용하여 홈페이지 재크롤링을 요청하세요.
빠른 디버깅 체크리스트
https://yoursite.com/favicon.ico를 열어보세요 — 로드됩니까?- DevTools → 네트워크 탭 → 새로고침 → "favicon"으로 필터링 — 404 오류가 있습니까?
- HTML 소스를 확인하세요 —
<link>태그가 올바르고<head>안에 있습니까? - 시크릿 모드를 시도해보세요 — 거기서는 표시됩니까?
- 다른 브라우저에서 확인해보세요 — 브라우저 특정 문제입니까?