아이콘 만들기이란?
아이콘 제작 도구를 사용하면 앱, 웹사이트, 파비콘용 간결하고 전문적인 아이콘을 만들 수 있습니다. 격자 캔버스에서 도형, 글자, 색상을 조합하고 필요하면 두 가지 색의 그라디언트를 배경에 적용한 뒤, 다양한 크기(16×16~512×512)로 PNG, SVG, 다중 크기 .ico 또는 favicon ZIP 한 묶음으로 한 번에 내보낼 수 있습니다.
베이스 모양으로 원·사각형·둥근 사각형 중 하나를 고르고 배경색과 전경색을 정한 다음, 글자 하나 또는 내장 심볼(체크, 별, 화살표, 하트, 더하기) 중 하나를 가운데에 올립니다. 글자 크기와 오프셋을 미세 조정해 정중앙에 맞춘 뒤, 16×16 파비콘부터 512×512 PWA 매니페스트 아이콘까지 여섯 가지 표준 크기를 한 번의 클릭으로 내보낼 수 있습니다.
사용 방법
- 1단계 — 기본 도형(원, 정사각형, 둥근 사각형)을 선택하고 배경색을 설정하세요.
- 2단계 — 글자, 기호 또는 간단한 도형을 오버레이로 추가하세요. 전경색, 크기, 위치를 조정할 수 있습니다.
- 3단계 — 여러 크기로 미리 보고 PNG(16, 32, 48, 128, 256, 512px), SVG, .ico로 내보내거나, 바로 붙여 넣을 수 있는 HTML 스니펫과 함께 favicon ZIP 묶음을 한 번에 받아 가세요.
사용 시기
- 사이드 프로젝트에 파비콘이 필요한데 Figma를 켜기도, 아이콘 팩을 사기도 싫을 때.
- 최종 아트가 나오기 전, Android·iOS 프로토타입용 임시 앱 아이콘이 필요할 때.
- 개인 사이트나 GitHub 아바타용으로 이니셜이 들어간 브랜드 컬러 타일을 만들 때.
결과
개발자가 할일 앱용 파비콘을 만듭니다: 파란 둥근 사각형 배경(#3B82F6)에 흰색 체크마크 기호를 넣고, 브라우저 탭용 32×32 PNG와 PWA 매니페스트용 512×512 PNG로 내보냅니다.
자주 묻는 질문
- 웹사이트 파비콘에 실제로 필요한 크기는?
- 최소한 데스크톱 브라우저 탭용 32×32 PNG와 iOS 홈 화면·Android 단축 아이콘용 180×180(또는 192×192)이 있어야 합니다. PWA를 배포한다면 매니페스트용 512×512도 필요합니다. 모든 크기 내보내기 버튼을 누르면 전체 세트가 한 번에 만들어집니다.
- SVG와 PNG 중 어느 것으로 내보내야 하나요?
- SVG는 어떤 크기로도 완벽하게 확대됩니다. 사이드바 로고처럼 앱 안에서 여러 크기로 쓰는 아이콘에 적합합니다. PNG는 파비콘, 앱스토어, 벡터를 받지 않는 플랫폼에 필수입니다. 내보내기 메뉴에서 둘 다 제공합니다.
- 내장 심볼 대신 직접 만든 이미지나 심볼을 쓸 수 있나요?
- 네. 오버레이를 「이미지」 모드로 바꾸고 PNG, JPG, SVG, WebP를 업로드하세요. 선택한 모양에 맞춰 잘리고, 내보내기 전에 크기 조절·이동·회전을 할 수 있습니다. 간단한 마크라면 「글자」 모드에서 붙여넣은 이모지를 포함해 어떤 한 글자든 쓸 수 있습니다. 완전한 맞춤 로고는 투명 SVG를 올리고 배경을 투명으로 선택하세요.
- 작은 크기로 내보내면 왜 글자가 살짝 비뚤어 보이나요?
- 서체의 시각적 중심은 기하학적 중심과 잘 맞지 않습니다. 디센더가 있는 g·p·y나 큼직한 대문자는 수학적 중심에서 한두 픽셀 옮겨야 균형 잡혀 보입니다. 내보내기 전에 Offset X와 Offset Y 슬라이더로 조정하세요.
- 둥근 사각형이 iOS나 Android의 시스템 형태와 같나요?
- iOS 형태에 가까운 범용 둥근 사각형입니다. Android(원, Squircle, 물방울 등)와 iOS 모두 제출한 아이콘 위에 자체 적응형 마스크를 씌우니, 풀 블리드로 디자인하고 OS가 현재 모양에 맞춰 잘라 내도록 두면 됩니다.