UltKit

SVG 아이콘 변환

벡터 로고 하나로 파비콘, Windows 바로 가기, Mac 앱, 휴대폰 런처 아이콘까지 모든 아이콘 자리를 채울 수 있습니다. 이 페이지는 다중 크기 ICO로 시작하며, 다른 플랫폼용으로 ICNS나 PNG로 바꿀 수 있습니다.

이미지 변환

또는 JPG, JPEG, JPE … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

  1. 1

    정사각형 SVG 업로드

    마크의 SVG를 추가하십시오. viewBox가 정사각형이면 가장 좋습니다. 밝은 버전과 어두운 버전처럼 한 번에 최대 20개 파일을 추가할 수 있습니다.

  2. 2

    아이콘 형식 선택

    아이콘 크기가 모든 크기 (16–256)로 설정된 ICO가 미리 선택되어 있습니다. macOS용은 변환할 형식에서 ICNS를, 휴대폰이나 스토어 아이콘용은 PNG를 고르고 출력 이미지 크기 조절에서 너비를 지정하십시오.

  3. 3

    변환 후 파일 배치

    ICO로 변환을 누르고(버튼 이름은 고른 형식에 따라 바뀝니다) 내려받은 뒤, 각 파일을 플랫폼이 요구하는 위치에 두십시오.

아이콘 형식은 하나가 아닙니다. Windows와 브라우저는 ICO, macOS는 ICNS, 휴대폰은 PNG 세트를 씁니다. SVG에서 시작하면 이 모든 파일을 벡터에서 새로 그리므로 크기마다 선명합니다.

SVG 아이콘 변환: 벡터 하나, 아이콘 파일 세 종류

아이콘 파일은 벡터가 아니라 작은 비트맵들을 담은 컨테이너입니다. 운영 체제는 필요한 크기에 가장 가까운 비트맵을 고르므로, 좋은 아이콘에는 각 격자에 맞춰 렌더링된 비트맵이 여러 개 들어 있습니다.

이 페이지의 ICO 프리셋은 16 px부터 256 px까지 모든 크기를 담은 파일 하나를 만들며, favicon.ico와 Windows 바로 가기에 쓸 수 있습니다. Apple 아이콘 컨테이너가 필요하면 변환할 형식을 ICNS로, Android, iOS, 앱 스토어가 요구하는 단일 크기가 필요하면 PNG로 바꾸십시오.

아래 표는 주요 플랫폼이 아이콘 자리에 대해 공개한 요구 사항입니다.

플랫폼별 필요한 아이콘 파일
기관요구 사항출처
Windows 데스크톱과 작업 표시줄16, 32, 48, 256 px를 포함한 여러 크기의 ICO—
웹사이트 파비콘사이트 루트에 16, 32, 48 px를 담은 favicon.ico, apple-touch-icon용 180 × 180 px PNG—
macOS 앱 아이콘ICNS 또는 Xcode 에셋 카탈로그, 최대 1024 × 1024 px—
Google Play 스토어 등록 정보512 × 512 px 32비트 PNG, 최대 1,024 KB—
Apple App Store투명도가 없는 1024 × 1024 px PNG—

SVG

SVG 벡터 그래픽(Scalable Vector Graphics)

SVG는 2001년 W3C가 표준화한 XML 기반 벡터 형식입니다. 픽셀 대신 도형, 패스, 텍스트를 기술하므로 어떤 크기에서도 선명하고, 로고와 아이콘은 보통 용량이 아주 작습니다. 투명도, CSS 스타일, 스크립트, 애니메이션을 지원하며 모든 브라우저가 기본으로 렌더링합니다. SVG는 사진에는 맞지 않고, 복잡한 일러스트는 렌더링이 느려질 수 있습니다. Illustrator, Inkscape, Figma와 브라우저에서 열고 편집할 수 있습니다.

압축 방식
–
투명도
예
애니메이션
예
도입 연도
2001 · W3C
SVG 변환

ICO

Windows 아이콘(ICO)

ICO는 Windows 프로그램 아이콘과 웹사이트 파비콘에 쓰이는 Microsoft의 아이콘 형식입니다. .ico 파일 하나에 16×16, 32×32, 48×48, 256×256 픽셀처럼 여러 크기의 이미지를 담을 수 있어 시스템이 가장 알맞은 것을 고릅니다. 각 이미지는 비트맵이나 PNG 데이터로 저장할 수 있고 완전한 알파 투명도를 지원합니다. ICO는 사진이나 큰 작업물용이 아닙니다. 브라우저, Windows, 대부분의 아이콘 편집기에서 읽을 수 있습니다.

압축 방식
무손실
투명도
예
애니메이션
아니요
도입 연도
Microsoft
ICO 변환

SVG 아이콘 변환을 찾는 사람은 벡터 로고는 하나인데 지원할 플랫폼이 여럿이고, 웹사이트의 favicon.ico부터 Mac의 ICNS, 앱 스토어의 크기별 PNG까지 플랫폼마다 아이콘 컨테이너가 다르기 때문입니다.

Windows·Mac·Android·iOS용 SVG 아이콘 변환

ICO를 유지하고 아이콘 크기는 모든 크기로 두십시오. 웹사이트 루트용이라면 결과 파일 이름을 favicon.ico로 바꾸고, Windows 바로 가기라면 아이콘 변경 대화 상자에서 이 파일을 지정하십시오.

  • 탭, 즐겨찾기, 작업 표시줄에 .ico 하나로 충분
  • iPhone 홈 화면 바로 가기용 180 px PNG 추가

16 px에서도 살아남는 SVG 디자인

16 × 16 px 아이콘에는 픽셀이 모두 256개뿐입니다. 대부분의 브랜드는 굵은 형태와 적은 색으로 된 별도의 아이콘 마크, 흔히 심볼이나 글자 하나만 둡니다. 아직 없다면 아이콘용으로 SVG를 단순화한 사본을 만드십시오.

변환하기 전에 viewBox를 확인하십시오. viewBox가 가로로 넓으면 마크 위아래에 빈 띠가 있는 아이콘이 나오므로 먼저 정사각형으로 자르십시오. 이미지를 비율에 맞춰 자르는 방법에서 정사각형 자르기를 다루고, SVG PNG 변환으로 큰 미리보기를 빠르게 만들어 디자인을 판단할 수 있습니다.

SVG 아이콘 변환 자주 묻는 질문

이 페이지와 SVG ICO 변환은 무엇이 다릅니까?

SVG ICO 변환은 파비콘과 Windows용 .ico 파일 하나에 집중합니다. 이 페이지는 macOS ICNS와 Android, iOS, 앱 스토어가 요구하는 고정 크기 PNG까지 아이콘이 쓰이는 모든 곳을 다룹니다.

운영 체제마다 어떤 아이콘 형식을 씁니까?

Windows는 ICO를, macOS는 ICNS나 Xcode에서 만든 에셋 카탈로그를 읽고, Android와 iOS는 고정된 픽셀 크기로 제공된 PNG 이미지를 받습니다.

앱에 필요한 PNG 크기를 한 번에 모두 만들 수 있습니까?

아닙니다. PNG 하나는 크기 하나만 담으므로 변환할 때마다 너비 하나가 만들어집니다. 출력 이미지 크기 조절을 한 크기로 설정해 변환한 뒤, 숫자를 바꿔 다시 변환하십시오. 각 크기는 벡터에서 선명하게 그려집니다.

이 페이지의 ICNS는 Retina Mac 아이콘을 지원합니까?

16 px부터 256 px까지의 크기가 들어 있습니다. 최신 macOS 앱 아이콘에는 Retina 디스플레이용 512 px와 1024 px 항목도 포함되며, Xcode나 Apple의 iconutil이 PNG로 이를 만듭니다. 이 두 크기는 여기서 PNG로 내보내 세트에 추가하십시오.

아이콘의 투명 배경을 유지해야 합니까?

ICO, ICNS, Android 런처 레이어는 그렇습니다. 투명도가 있어야 시스템이 자체 배경을 그릴 수 있습니다. 예외는 iOS App Store 아이콘입니다. Apple은 알파 채널이 있는 1024 px 마케팅 아이콘을 거부하므로, 그 PNG는 SVG에 단색 배경을 넣어 만드십시오.

세밀한 로고가 작은 아이콘에서 뭉개지는 이유는 무엇입니까?

16 px나 32 px에는 가는 선이나 작은 글자가 들어갈 공간이 없습니다. 가장 작은 크기에서도 최소 한 픽셀을 온전히 덮도록 선을 두껍게 하고 워드마크는 빼십시오.