언제 쓰나
새 사이트를 만들 때, 브라우저 탭에 뜨는 작은 아이콘·스마트폰 홈 화면에 저장할 때 보이는 아이콘·앱처럼 설치할 때 쓰이는 아이콘을 모두 한 번에 준비하고 싶을 때 씁니다. 이미지 한 장만 넣으면 필요한 7개 파일과 사이트 코드에 붙여넣을 한 토막이 ZIP 하나로 나옵니다.
사용법
정사각형 이미지 한 장을 올리세요. PNG · JPG · WebP · SVG 모두 받습니다. 브랜드 이름과 대표 색을 입력한 뒤 "생성" 을 누르면, 각 크기의 미리보기와 사이트 코드에 붙여넣을 한 토막이 바로 나옵니다.
결과물
ZIP 을 열면 다음이 들어 있습니다.
- favicon.ico — 16·32·48픽셀을 하나로 묶은 전통 형식. 오래된 브라우저 호환성용.
- icon-16.png · icon-32.png — 요즘 브라우저가 선호하는 파일.
- apple-touch-icon.png (180×180) — 아이폰 홈 화면에 저장할 때 쓰는 아이콘.
- icon-192.png · icon-512.png — 안드로이드·앱처럼 설치할 때 쓰는 큰 아이콘.
- site.webmanifest — 앱 이름·대표 색·아이콘 연결을 정의한 설정 파일.
- favicon.html — 사이트
<head>에 복사해 넣을 6줄 한 토막.
팁
- 정사각형 권장 — 가로세로가 다른 이미지도 받지만 빈 공간이 생깁니다.
- SVG 로 올리면 가장 선명 — 각 크기에서 다시 픽셀로 그려지므로, 선이 깨지지 않은 채 모든 크기가 또렷합니다.
- 작은 크기에는 단순한 모양으로 — 16픽셀 아이콘에서는 얇은 선이나 부드러운 색 변화가 뭉개집니다. 실루엣이 또렷한 쪽이 읽힙니다.
입력은 어디로 가나요?
올린 이미지의 리사이즈·PNG·ICO 인코딩은 모두 이 브라우저 안에서 실행됩니다. 원본·결과 모두 서버로 전송되지 않습니다. 탭을 닫으면 사라집니다.