파비콘 검사기

요약 (TL;DR)

검증의 중요성: 깨진 파비콘은 단순한 아이콘 누락이 아닙니다. 서버 로그에 404 오류를 발생시키고 브랜드 이미지를 손상시킵니다.
포괄적인 분석: 이 도구는 브라우저처럼 사이트를 크롤링하여 favicon.ico, PNG 아이콘, Apple Touch Icon 및 Web Manifest를 확인합니다.
실용적인 피드백: 파일 접근성, 크기 불일치 및 형식 유효성에 대한 구체적인 보고서를 받으세요.

파비콘 배포는 간단해 보이지만(파일 업로드, 태그 추가), 실제로는 겉으로 드러나지 않는 오류가 발생하기 쉽습니다. 데스크톱, Android, iOS 등 최신 브라우저 생태계는 모두 다른 요구 사항을 가지고 있습니다.

브라우저 캐싱: 로컬 브라우저는 파비콘을 공격적으로 캐싱하여, 새로운 방문자(및 검색 엔진)에게 보이는 배포 문제를 숨기는 경우가 많습니다.
파편화된 표준: favicon.ico만으로는 부족합니다. Apple 기기는 apple-touch-icon을 찾고, Android 기기와 PWA는 site.webmanifest를 찾습니다.
서버 구성: 서버가 403 Forbidden이나 잘못된 MIME 타입을 반환하면 HTML의 올바른 파일 경로도 소용이 없습니다.

이 검사기는 중립적인 제3자 클라이언트 역할을 하여 로컬 캐시를 우회하고 파비콘 배포의 실제 상태를 보여줍니다.

분석기는 대상 URL에 대해 다단계 감사를 수행합니다:

HTML 파싱: <head>를 스캔하여 선언된 모든 아이콘 링크(rel="icon", rel="apple-touch-icon", rel="manifest")를 찾습니다.
매니페스트 검증: Web Manifest가 발견되면 이를 가져와 icons 배열을 파싱하여 선언된 크기가 실제 파일 크기와 일치하는지 확인합니다.
자산 접근성: 참조된 각 아이콘을 다운로드하여 200 OK 상태를 반환하는지 확인합니다.
형식 및 크기: 바이너리 데이터를 검사하여 파일이 유효한 이미지(ICO, PNG, SVG)인지, 그리고 크기가 HTML/Manifest에 선언된 것과 일치하는지 확인합니다.
암시적 검색: 명시적으로 링크되지 않았더라도 /favicon.ico 및 /apple-touch-icon.png와 같은 표준 관례를 확인합니다.

<link rel="icon" href="/icon.png"> 태그가 있지만 해당 URL의 파일이 404를 반환하는 경우입니다. 해결: 도메인 루트를 기준으로 파일 경로가 올바른지 확인하세요.

type="image/png"라고 선언했지만 JPEG 또는 ICO 파일을 제공하는 경우. 일부 엄격한 브라우저는 아이콘을 거부할 수 있습니다. 해결: 서버의 Content-Type 헤더가 실제 파일 형식과 일치하는지 확인하세요.

HTML에는 sizes="32x32"라고 되어 있지만 실제 이미지는 16x16 또는 64x64인 경우. 이는 브라우저가 이미지를 즉석에서 리사이징하게 만들어 흐릿하게 보일 수 있습니다. 해결: 파비콘 생성기를 사용하여 정확한 크기를 생성하세요.

iOS 기기는 표준 파비콘을 사용하지 않습니다. apple-touch-icon이 없으면 사용자가 사이트를 홈 화면에 추가할 때 일반적인 페이지 스크린샷만 보게 됩니다. 해결: Apple 기기용 180x180 PNG를 항상 포함하세요.

견고한 파비콘 설정을 위해:

루트 폴백: 레거시 도구 및 RSS 리더를 위해 항상 루트(favicon.ico)에 favicon.ico를 두세요.
모던용 SVG: 최신 브라우저에서 해상도 독립성을 위해 SVG 파비콘(type="image/svg+xml")을 사용하세요.
매니페스트: Android 및 Chrome용으로 manifest.json에 별도의 아이콘(src, sizes, type)을 정의하세요.
캐시 버스팅: 아이콘을 업데이트한 경우 쿼리 문자열(예: ?v=2)을 추가하여 브라우저가 다시 가져오도록 강제하세요.