파비콘 파일 구성: ICO·PNG·manifest
브라우저 탭, 검색결과, iOS 홈 화면, PWA에 필요한 파비콘 파일과 설치 태그를 목적별로 정리합니다.
이런 상황에서 필요합니다
favicon.ico 하나만 있으면 충분한지, 16·32·48·180·192·512px 파일을 어디에 쓰는지 몰라 설치가 막혔을 때 확인하세요.
검색 파비콘과 브라우저 아이콘의 기준
Google Search Central은 파비콘이 1:1 정사각형이고 최소 8×8px이어야 하며, 여러 화면에서 잘 보이도록 48×48px보다 큰 이미지를 권장합니다. 조건을 만족해도 검색결과 노출은 보장되지 않습니다.
브라우저와 운영체제는 서로 다른 크기를 선택합니다. 한 장의 큰 원본에서 여러 PNG와 multi-size ICO를 함께 만드는 이유입니다.
호환 패키지에 넣을 파일
기본 패키지는 favicon.ico, 16·32·48px PNG, 180px Apple touch icon, 192·512px 앱 아이콘, site.webmanifest로 구성할 수 있습니다.
ICO는 단순히 PNG 파일의 확장자를 바꾼 것이 아니라 여러 크기 프레임을 담는 컨테이너여야 합니다. ZIP을 만든 뒤 엔트리와 실제 이미지 치수를 다시 확인하세요.
안정된 URL로 head에 연결하기
홈 문서의 head에 rel=icon, apple-touch-icon, manifest 링크를 추가하고 파일 URL을 자주 바꾸지 않습니다. 크롤러가 홈과 파비콘 파일에 접근할 수 있어야 합니다.
16px 미리보기에서 형태가 뭉개지면 디테일을 줄이거나 안전 여백을 넓히세요. 래스터 입력을 SVG 벡터로 변환했다고 주장해서는 안 됩니다.
파일별 사용처 예시
| 파일 | 크기 | 주요 사용처 | 검사 |
|---|---|---|---|
| favicon.ico | 16·32·48 포함 | 브라우저 호환 | ICO 프레임 재파싱 |
| apple-touch-icon.png | 180×180 | iOS 홈 화면 | 정사각형 PNG |
| icon-192/512.png | 192·512 | webmanifest/PWA | manifest 경로 일치 |
사진을 기기 안에서 바로 처리하기
파비콘 패키지 만들기
ICO·PNG·manifest·설치 안내를 하나의 ZIP으로 생성합니다.
도구 열기출처와 확인일
출처 확인일은 외부 문서를 마지막으로 확인한 날짜이고, 내용 업데이트일은 이 가이드 본문을 실제로 수정한 날짜입니다. 두 날짜가 같더라도 의미는 다릅니다.