파비콘·PWA 아이콘 생성기
로고를 고르고 정사각형에 어떻게 넣을지 정한 뒤, 작은 크기를 확인하고 아이콘과 코드를 한 번에 받으세요.
여기에 파일을 놓으세요
허용 형식: PNG, JPEG 및 WEBP. 최대 20MB.
Ctrl+V / ⌘V로 붙여넣어도 돼요.
한눈에 보기
CatTower 파비콘 생성기는 PNG·JPEG·WebP 로고 한 장으로 여러 크기가 든 favicon.ico, PNG 파비콘, Apple 터치 아이콘, PWA 아이콘과 이에 맞는 HTML·웹 앱 manifest 코드를 브라우저에서 만들어 주는 무료 온라인 도구예요.
- PNG·JPEG·WebP 로고 한 장을 20MB, 4천만 화소(40MP)까지 열 수 있어요. SVG는 받지 않아요.
- 결과물은 16·32·48px PNG 이미지가 든 favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png(180px), icon-192.png, icon-512.png와 README.txt이고, ZIP 하나로 받아요.
- 정사각형에 전체 보이기 또는 꽉 채우기, 여백 0~30%, 투명 또는 색 배경, 모서리 둥글기 0~50%를 모든 파일에 똑같이 적용해요.
- 크기마다 원본 이미지에서 바로 그리고, favicon.ico는 ZIP을 주기 전에 다시 읽어서 확인해요.
- 로고는 브라우저에서 처리하고 CatTower 서버로 업로드하지 않아요.
이럴 때 써요
- 새 웹사이트에 로고로 파비콘과 Apple 터치 아이콘을 넣을 때
- PWA에 필요한 192·512px 아이콘과 manifest 아이콘 목록을 만들 때
- 로고가 브라우저 탭의 16·32px 크기에서도 알아보기 쉬운지 확인할 때
사용 방법
- 20MB, 4천만 화소 이하의 PNG·JPEG·WebP 로고 한 장을 끌어다 놓거나 선택하세요.
- 전체 보이기(로고 전체가 보여요)나 꽉 채우기(정사각형을 채우고 가장자리는 잘려요)를 고르고, 여백(0~30%), 투명 또는 색 배경, 모서리 둥글기(0~50%)를 정하세요.
- 16·32·180·192px 미리 보기와 512px 아이콘의 maskable 안전 영역을 확인하세요.
- 아이콘 세트 만들기를 누르고 ZIP을 내려받아 파일을 사이트 루트 폴더에 복사하세요.
- HTML은 페이지의 head에, 아이콘 목록은 웹 앱 manifest에 붙여 넣으세요.
자주 묻는 질문
아니요. 로고는 내 기기의 브라우저가 열고, 크기마다 그리고, ZIP으로 묶어요. CatTower 서버로 업로드하지 않고, 파일 이름·색·설정도 어디로도 보내지 않아요. 확장 프로그램처럼 기기에서 실행되는 다른 소프트웨어는 사이트가 통제할 수 없어요.
아니요. 16·32·48px 이미지 세 개가 들어 있는 진짜 ICO 파일이에요. 각 이미지는 요즘 모든 브라우저가 읽는 PNG 형식으로 담겨요. ZIP을 내려받기 전에 아이콘을 다시 읽어서 세 이미지의 크기와 위치가 맞는지 확인해요.
favicon.ico(16·32·48px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png(180px), icon-192.png, icon-512.png와 HTML·manifest 코드가 적힌 README.txt예요. ZIP 이름은 로고 파일 이름 뒤에 -favicon이 붙어요.
크기마다 원본 이미지에서 한 번씩 브라우저의 고품질 보간으로 바로 그려요. 큰 아이콘을 다시 줄여서 작은 아이콘을 만들지 않으니 흐림이 쌓이지 않아요. 그래도 아주 얇은 선이나 작은 글자는 16px에서 안 보일 수 있어서, 만들기 전에 실제 크기 미리 보기를 보여 드려요.
브라우저 탭에서는 보통 투명 배경이 가장 잘 어울려요. 다만 Apple 기기는 apple-touch-icon.png의 투명한 부분을 검은색으로 보여 줘요. 로고에 투명한 부분이 있으면 안내해 드리니 필요하면 배경색을 골라 주세요. 설정은 모든 파일에 똑같이 적용돼요.
Android는 설치한 앱 아이콘을 원이나 다른 모양으로 잘라서 보여 줄 수 있어요. 512px 미리 보기의 점선 원이 항상 보이는 영역(너비의 80%)이에요. 별도의 maskable 아이콘 파일은 만들지 않으니, 여백을 늘려 로고가 원 안에 들어오게 하세요.
아직은 안 돼요. SVG에는 스크립트나 다른 파일 링크가 들어 있을 수 있고 브라우저마다 그리는 결과가 달라서, PNG·JPEG·WebP만 받아요. 로고를 한 변이 512px 이상인 큰 PNG로 내보내서 올려 주세요.