파비콘이 안 보일 때: 크롬·사파리·구글 검색 해결법 10가지

업데이트: 2026-10-27 · AnyToolsKit

새 파비콘을 올렸는데 브라우저가 여전히 예전 아이콘을 보여 주거나 아무것도 안 보이나요? 이 체크리스트를 위에서부터 따라가 보세요. 앞의 세 항목으로 대부분 해결됩니다.

1. 파비콘 캐시 지우기

브라우저는 파비콘을 페이지와 따로, 때로는 몇 주씩 캐시합니다. 강력 새로고침(Ctrl+Shift+R / Cmd+Shift+R) 후 아이콘 URL을 직접 열어 그것도 새로고침하세요. 크롬에서는 새 시크릿 창으로 확인할 수도 있습니다. 최후의 방법으로 버전 쿼리를 붙이세요: href="/favicon.ico?v=2".

2. 아이콘 URL 직접 열기

https://내사이트.com/favicon.ico(그리고 각 PNG)를 방문하세요. 404나 HTML 페이지가 나온다면 태그가 가리키는 곳에 파일이 없는 것입니다. 흔한 원인: 빌드 출력에 파일이 복사되지 않음, 하위 경로 배포(예: GitHub Pages 프로젝트 사이트), 리눅스 서버의 대소문자 구분(Favicon.ico ≠ favicon.ico).

3. HTML 태그 확인

• 태그는 <body>가 아니라 <head> 안에 있어야 합니다.
• 오타 확인: rel="favicon"이 아니라 rel="icon".
• 테마나 플러그인이 넣은 예전·중복 아이콘 태그를 지우세요 — 브라우저가 그쪽을 고를 수 있습니다.
• type이 파일과 일치하는지 확인하세요(image/png, image/svg+xml, image/x-icon).

4. 진짜 ICO 파일인가요?

확장자만 .ico로 바꾼 PNG는 브라우저에 따라 동작하지 않습니다. 파일을 ICO 뷰어에 넣으면 실제 형식과 안에 든 모든 크기를 보여 줍니다. 잘못된 파일이라면 이미지 → ICO로 다시 만드세요.

5. 서버 MIME 형식과 리디렉션

• .ico는 image/x-icon(또는 image/vnd.microsoft.icon), .svg는 image/svg+xml로 제공하세요.
• 아이콘에 리디렉션 체인이 없게 하고 HTTPS로 직접 제공하세요.
• 아이콘이 로그인이나 봇 차단 검사 뒤에 있지 않은지 확인하세요.

6. SVG 파비콘의 특이점

사파리는 탭에 SVG 파비콘을 쓰지 않고, 일부 브라우저는 외부 글꼴이나 CSS에 의존하는 SVG를 무시합니다. SVG 옆에 항상 ICO나 PNG 대체 아이콘을 두세요.

7. 구글 검색에 엉뚱한 아이콘이 보일 때

• 아이콘은 48px의 배수나 SVG여야 하고, 아이콘과 홈페이지 모두 크롤링할 수 있어야 합니다(robots.txt의 Disallow 규칙 확인).
• <link rel="icon">을 도메인 또는 서브도메인의 홈페이지에 넣으세요.
• 구글 서치 콘솔에서 홈페이지 색인 생성을 다시 요청하세요. 반영까지 며칠에서 몇 주가 걸릴 수 있습니다.

8. 모바일 홈 화면 아이콘

iOS는 애플 터치 아이콘을, 안드로이드는 매니페스트 아이콘을 쓰며 favicon.ico는 쓰지 않습니다. 변경 후에는 홈 화면 바로가기를 지우고 다시 추가하세요.

9. 윈도우 바로가기와 고정한 사이트

브라우저에서 만든 바탕화면 바로가기는 만들 당시의 아이콘을 복사해 둡니다. 지우고 다시 만들거나, 이 가이드대로 윈도우 아이콘 캐시를 새로 고치세요.

10. 콘텐츠 보안 정책(CSP)

사이트가 엄격한 Content-Security-Policy 헤더를 보낸다면, img-src가 아이콘을 제공하는 출처(보통 'self')를 허용하는지 확인하세요.