Web, PWA, Chrome 아이콘

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/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

웹사이트에 아이콘 연결

1. Web 파일을 사이트의 공개 폴더로 복사해 도메인 루트에 게시하거나 선택한 폴더에 맞춰 경로를 변경하세요.
2. site.webmanifest의 name과 short_name을 수정하세요. start_url과 scope는 매니페스트 위치를 기준으로 하며 출력 아이콘 경로는 /로 시작합니다. 하위 폴더에 배치하면 경로를 바꾸세요.
3. 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">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

이 아이콘은 maskable용으로 설계되지 않았습니다. ZIP은 service worker나 오프라인 기능을 추가하지 않으며 아이콘만으로 설치를 보장하지 않습니다. 대상 브라우저와 기기에서 테스트하세요.

파비콘 및 PWA 아이콘 생성기

Chrome 아이콘과 홍보 이미지 내보내기

이미지를 올리고 Chrome을 선택하면 PNG 아이콘과 직사각형 이미지를 만듭니다. 흰 배경 중앙에 원본을 배치하므로 제출 전에 디자인을 확인하세요.

• 확장 아이콘: 16, 32, 48, 128 px PNG와 Manifest V3 시작 파일.
• 스토어 아이콘 (128x128): Chrome Web Store 등록용 별도 PNG.
• 작은 타일 (440x280): 작은 홍보 영역에 사용할 불투명 PNG.
• Marquee (1400x560): 선택적인 큰 홍보 이미지이며 스크린샷과는 별도입니다.
• 스크린샷: 실제 확장 화면을 1280x800 또는 640x400으로 별도 촬영하세요. 이 도구는 화면 촬영이나 프레임 추가를 하지 않습니다.

Chrome 확장 아이콘 및 스토어 이미지 생성기

공식 참고 문서

• Web App Manifest
• Chrome Web Store