ICO와 PNG를 함께 만드는 이유
favicon.ico에는 16·32·48px PNG 이미지 세 개가 들어갑니다. 180px는 Apple 터치 아이콘용, 192·512px는 매니페스트 아이콘용입니다. 브라우저와 설치 환경이 참조하는 파일이 달라 함께 제공합니다.
웹 자산
파비콘 및 PWA 생성기
ICO, PNG 아이콘과 웹 매니페스트를 한 번에 만듭니다.
파일은 이 브라우저에서 처리됩니다.파일을 놓거나 선택하세요. 이미지 붙여넣기도 가능합니다.
JPG · PNG · WebP / 40MB · 1,600만 픽셀 이하 / 애니메이션·회전 메타데이터 제외미리보기
파일을 선택해 시작하세요.
결과
사용 방법
-
정사각형 원본 준비
로고나 심볼 이미지를 선택합니다. 가느다란 선과 작은 글자는 16px에서 보이지 않을 수 있습니다.
-
이름과 색 설정
앱 이름, 테마 색상, 배경색과 일반 아이콘의 여백을 정합니다. 마스커블 아이콘은 별도의 안전 여백을 씁니다.
-
패키지를 사이트에 적용
ZIP을 풀어 사이트 루트에 파일을 넣고 integration.html의 태그를 head에 추가합니다. 하위 경로 배포라면 링크와 매니페스트 경로를 수정하세요.
도구 설명
마스커블 아이콘과 웹 매니페스트
마스커블 아이콘은 주요 그림을 중앙 56% 너비의 영역 안에 배치해 중앙 안전 원 안에 들어가도록 합니다. 매니페스트는 이름·시작 주소·표시 방식·아이콘을 담지만 서비스 워커나 오프라인 동작을 구현하지 않습니다.
현재 지원 범위
- JPG · PNG · WebP / 40MB · 1,600만 픽셀 이하 / 애니메이션·회전 메타데이터 제외
- 크기는 양의 정수여야 하며, 한 변 8,192px·1,600만 픽셀 이하여야 합니다.
- SVG 입력은 SVG 마무리에서 PNG로 변환한 뒤 사용하세요.
- 패키지는 사이트 루트 배치를 기준으로 만듭니다.
- 생성 파일만으로 앱 설치 가능 여부나 오프라인 동작을 보증하지 않습니다.
자주 묻는 질문
ICO가 PNG와 다른가요?
ICO는 여러 크기의 아이콘을 담는 컨테이너입니다. 이 도구는 세 크기의 PNG를 하나의 ICO에 넣습니다.
마스커블 아이콘은 왜 작게 보이나요?
운영체제가 원이나 둥근 사각형으로 잘라도 주요 그림이 남도록 여백을 넉넉하게 둡니다.
이름이 바뀌지 않으면 어떻게 하나요?
먼저 파일 경로와 head 태그를 확인하세요. 브라우저가 이전 아이콘을 캐시할 수 있으므로 새 탭이나 별도 프로필에서도 확인합니다.