파비콘은 브라우저 탭에서 웹사이트를 나타내는 작은 아이콘입니다. 프로그레시브 웹 앱(PWA)의 경우 웹 매니페스트와 모바일 홈 화면용 더 큰 아이콘도 필요합니다.
파비콘과 PWA 아이콘 파일 설치
Web ZIP에는 favicon.ico, 16/32 px PNG, 180 px Apple touch 아이콘, 192/512 px PWA 아이콘, site.webmanifest, 1200x630 og.png가 포함됩니다.
Web ZIP 내용
두 PWA PNG는 일반 정사각형 아이콘입니다. 이름과 크기는 site.webmanifest의 icons 배열에 대응하며 og.png는 별도 공유 이미지입니다.
웹사이트에 아이콘 연결
- Web 파일을 사이트의 공개 폴더로 복사해 도메인 루트에 게시하거나 선택한 폴더에 맞춰 경로를 변경하세요.
- site.webmanifest의 name과 short_name을 수정하세요. start_url과 scope는 매니페스트 위치를 기준으로 하며 출력 아이콘 경로는 /로 시작합니다. 하위 폴더에 배치하면 경로를 바꾸세요.
- HTML head에 manifest, favicon, Apple touch 링크를 추가하세요. HTTPS 또는 localhost를 사용하고 브라우저 개발 도구로 매니페스트와 이미지 URL을 확인하세요. HTML 대체 페이지가 아닌 이미지가 반환되어야 합니다.
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">이 아이콘은 maskable용으로 설계되지 않았습니다. ZIP은 service worker나 오프라인 기능을 추가하지 않으며 아이콘만으로 설치를 보장하지 않습니다. 대상 브라우저와 기기에서 테스트하세요.
Web, PWA, Chrome 통합 가이드 읽기