파비콘은 파일을 만드는 것만으로 적용되지 않습니다. 사이트에 파일을 배치하고 페이지가 그 파일을 가리키도록 해야 합니다. 여기서는 PolishTools에서 생성한 패키지를 사이트 루트에 넣는 경우를 기준으로 설명합니다.
ZIP 안의 파일 구분하기
favicon.ico는 여러 작은 크기를 담고, icon-*.png는 각 크기의 개별 이미지입니다. apple-touch-icon.png, icon-maskable-512.png, site.webmanifest, integration.html도 함께 들어 있습니다. integration.html은 페이지 전체가 아니라 head에 넣을 태그 참고용입니다.
루트 경로와 하위 경로
생성된 태그와 매니페스트는 /favicon.ico처럼 /로 시작합니다. 사이트가 example.com/app/에서 실행된다면 /app/ 아래에 둘지 사이트 루트에 둘지 먼저 정하세요. 파일 위치와 link의 href, 매니페스트 icons의 src, start_url이 실제 배포 위치와 맞아야 합니다.
작은 아이콘과 마스커블 확인
16px PNG를 실제 크기로 열어 선이 뭉개지지 않는지 보세요. 마스커블 아이콘은 운영체제가 잘라 표시할 수 있어 주요 그림 주위에 여백을 둡니다. PolishTools는 일반 아이콘과 별도의 마스커블 파일을 만듭니다.
매니페스트를 연결했다고 오프라인 웹앱이 만들어지는 것은 아닙니다. 앱 설치와 오프라인 동작은 사이트 구현과 브라우저 조건을 별도로 확인해야 합니다.
예: Astro 사이트 루트에 적용
Astro 사이트를 도메인 루트에서 제공하고 기존 파비콘을 교체하려는 경우입니다.
순서
- ZIP의 이미지·ICO·매니페스트를 프로젝트 public 폴더에 넣습니다.
- 레이아웃 head에 integration.html의 태그를 반영하고 이전 파비콘 태그와 중복되는지 확인합니다.
- 빌드·배포 후 /favicon.ico와 /site.webmanifest가 열리는지 확인합니다.
결과
파일이 실제로 제공되고 페이지가 그 경로를 참조하면 적용 준비가 끝납니다. 화면에 이전 아이콘이 남으면 캐시와 다른 head 태그도 확인하세요.
자주 묻는 질문
생성한 매니페스트를 그대로 써도 되나요?
앱 이름, 색상, 시작 주소와 아이콘 경로가 사이트에 맞는지 먼저 확인하세요. 하위 경로 배포에서는 수정이 필요할 수 있습니다.