PWA 아이콘 생성기

몇 초 만에 Progressive Web App 아이콘 생성

PWA(프로그레시브 웹 앱)는 규격에 맞는 아이콘 크기와 유효한 web app manifest를 필요로 합니다. 이 도구를 사용하면 이미지를 한 번 업로드하는 것만으로 필요한 모든 PWA 아이콘과 즉시 사용할 수 있는 site.webmanifest 파일을 자동으로 생성할 수 있습니다.

PWA 아이콘이란?

PWA 아이콘은 사용자가 웹 앱을 기기에 ‘설치’할 때 사용되는 앱 아이콘입니다. 이 아이콘은 여러 위치에 표시되며, 웹 앱이 네이티브 앱처럼 보이도록 도와줍니다.

• Android 홈 화면
• 앱 런처 / 앱 목록
• 작업 전환 화면
• 스플래시 화면 / 시작 화면

정상적으로 구성된 PWA 아이콘은 다양한 기기에서 일관되고 전문적인 인상을 주는 데 중요합니다.

PWA 권장 아이콘 크기 (Google 권장)

Android Chrome 아이콘

• 192x192 – 홈 화면 아이콘
• 512x512 – 앱 런처 및 스플래시 화면용 아이콘

이 크기들은 현대 브라우저의 PWA 설치 검사 기준을 통과하기 위해 필수적이며, 누락되면 Lighthouse나 브라우저 검사 도구에 경고가 표시될 수 있습니다.

생성되는 파일

아이콘 파일

• android-chrome-192x192.png
• android-chrome-512x512.png

Manifest 파일

• site.webmanifest (사전 구성, 바로 사용 가능)

예시:

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

PWA 아이콘 생성을 위해 favicon.pub을 사용할 이유

• Google 권장 사양에 맞는 아이콘 크기
• Web App Manifest 파일 자동 생성
• 수동 리사이징 및 내보내기 작업 불필요
• PNG, JPG, SVG 등 다양한 형식의 원본 이미지 지원
• 무료이면서 즉시 다운로드 가능

PWA 아이콘을 사이트에 적용하는 방법

1. 로고 또는 아이콘 이미지를 업로드합니다.
2. 생성된 PWA 아이콘과 manifest 파일을 다운로드합니다.
3. 파일을 웹사이트 루트 디렉터리에 배치합니다.
4. HTML에 manifest를 가리키는 link 태그를 추가합니다.

<link rel="manifest" href="/site.webmanifest">

PWA 아이콘 vs Favicon

자주 묻는 질문

사이트 내 관련 링크

• Favicon 생성기 메인으로 돌아가기
• SVG Favicon 생성기
• Favicon 크기 가이드