파비콘 점검

파비콘 점검은 사이트의 HTML head에 선언된 아이콘과 웹 매니페스트, 그리고 루트의 /favicon.ico 기본 경로 존재 여부를 한 번에 확인하는 도구입니다. 브라우저 탭, 북마크, 홈 화면 아이콘이 제대로 표시되려면 적절한 <link rel="icon">·apple-touch-icon·manifest 선언이 필요합니다.

URL만 입력하면 서버가 해당 페이지를 안전하게 가져와 head에서 아이콘 링크를 추출하고, 동시에 /favicon.ico가 200으로 응답하는지 별도로 점검합니다. 파비콘이 보이지 않는 원인이 선언 누락인지, 기본 경로 파일 부재인지 빠르게 가려낼 수 있습니다.

아이콘 선언 종류와 역할

• rel="icon" / shortcut icon: 탭·북마크에 쓰이는 기본 파비콘. PNG·SVG·ICO 사용.
• apple-touch-icon: iOS 홈 화면에 추가할 때 쓰는 아이콘(권장 180×180 PNG).
• mask-icon: Safari 고정 탭용 단색 SVG 아이콘.
• rel="manifest": PWA 매니페스트. 안드로이드 홈 화면 아이콘·이름·테마색을 정의.

파비콘이 안 보일 때 점검 순서

먼저 head에 아이콘 링크가 선언돼 있는지 확인하고, 다음으로 /favicon.ico가 실제로 존재하는지 봅니다. 선언이 있어도 href 경로가 잘못됐거나(404), 캐시된 옛 아이콘이 남아 갱신이 늦을 수 있습니다. 브라우저는 파비콘을 오래 캐싱하므로 변경 후에는 강력 새로고침이나 파일명 변경이 도움이 됩니다. head에 들어간 다른 메타 태그 (title·description·canonical 등)까지 함께 점검하려면 SEO 메타 태그 점검을 이용하세요.

권장 크기와 완전한 선언 세트

요즘 브라우저는 고해상도 원본 하나를 잘 축소하므로 수십 개 크기를 일일이 둘 필요가 없습니다. 실무에서 누락 없이 커버되는 조합은 아래와 같습니다. sizes 속성은 어디까지나 힌트이며, SVG 아이콘에는 sizes="any"를 붙여 모든 크기에 대응됨을 알려주는 것이 좋습니다.

결과 해석 예시

예를 들어 https://example.com을 점검했더니 rel="icon" → /favicon.svg (발견), apple-touch-icon → 없음, manifest → /site.webmanifest (발견), /favicon.ico→ 404로 나왔다고 합시다. 해석은 이렇습니다. 데스크톱 탭은 SVG로 정상 표시되고 안드로이드 설치 아이콘은 매니페스트에서 가져오지만, iOS에서 "홈 화면에 추가"하면 apple-touch-icon이 없어 화면 캡처로 대체되고, SVG를 무시하고 무조건 /favicon.ico를 요청하는 아주 오래된 브라우저는 404를 받습니다. 해결책은 180×180 apple-touch-icon 하나와 루트의 멀티 해상도 /favicon.ico를 추가하는 것입니다.

흔한 실수 / 함정

• 유효한 rel="icon" 선언이 있는데도 /favicon.ico 404를 "고장"으로 단정하기 — 선언된 아이콘이 우선이므로 실제로 깨진 게 아닙니다(레거시 폴백만 사라진 상태).
• apple-touch-icon에 투명 PNG를 넣기 — iOS는 투명 영역을 검정으로 채우므로 배경을 입힌 완전 불투명 이미지를 써야 합니다.
• 서브경로 배포에서 루트 기준 경로 사용 — href="/icon.png"은 하위 폴더가 아니라 도메인 루트로 해석되어 조용히 404가 납니다.