SVG ICO 변환

SVG에서 파비콘을 만드는 것이 가장 좋은 경우입니다. 각 아이콘 크기를 큰 비트맵에서 줄이는 대신 벡터에서 새로 그리므로, 16 px 버전도 픽셀 격자가 허용하는 한 선명하게 유지됩니다.

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

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

출력

변환할 형식

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

사용 방법

1
SVG 로고 업로드
전체 워드마크가 아니라 심볼이나 모노그램을 쓰십시오. viewBox가 정사각형이면 가장 깔끔한 결과가 나옵니다.
2
모든 아이콘 크기 유지
아이콘 크기는 모든 크기 (16–256)에서 시작하며, 모든 해상도를 .ico 하나에 담습니다. 프로그램이 정확히 한 가지 크기만 요구할 때만 단일 크기를 고르십시오.
3
ICO로 변환 누르기
파일을 favicon.ico라는 이름으로 사이트 루트 폴더에 저장하거나, Windows 바로 가기 아이콘으로 지정하십시오.

답변

파비콘용으로 SVG를 ICO로 변환하려면 어떻게 합니까?

SVG를 업로드하고 아이콘 크기를 모든 크기 (16–256)로 둔 채 ICO로 변환을 누르십시오. 모든 해상도를 벡터에서 그린 .ico 하나가 투명도를 유지한 채 만들어집니다.

SVG ICO 변환: 벡터가 알맞은 원본인 이유

.ico 형식은 초기 Windows 버전에서, favicon.ico 관례는 1999년 Internet Explorer 5에서 시작되었습니다. Internet Explorer 5는 즐겨찾기에 추가한 모든 사이트의 루트에서 이 이름의 파일을 찾았습니다. ICO는 작은 컨테이너로, 각각 별도의 정사각형 비트맵인 항목들의 목록입니다. 그래서 파일 하나에 16 px 탭 아이콘과 256 px 데스크톱 아이콘을 나란히 담을 수 있습니다. Windows Vista는 최대 크기를 256 × 256으로 늘리고 이런 큰 항목을 PNG로 저장할 수 있게 했습니다.

항목마다 별도의 비트맵이므로 아이콘의 품질은 각 크기를 어떻게 만들었는지에 달려 있습니다. PNG에서 만들면 모든 크기가 같은 픽셀을 축소한 결과입니다. SVG에서 만들면 모든 크기가 경로를 새로 렌더링한 결과이며, 안티앨리어싱도 그 격자에 맞춰 계산됩니다. 로고에 쓸 수 있는 픽셀이 256개뿐인 16 × 16 px에서는 이 차이가 눈에 보입니다.

1:1

16 × 16 px

16 × 16

브라우저 탭, 즐겨찾기, 방문 기록 목록.

1:1

32 × 32 px

32 × 32

고밀도 화면의 탭, Windows 작업 표시줄 바로 가기.

1:1

64 × 64 px

64 × 64

배율이 적용된 데스크톱 보기와 고정된 항목.

1:1

128 × 128 px

128 × 128

파일 관리자의 큰 미리보기.

1:1

256 × 256 px

256 × 256

ICO의 가장 큰 항목, 탐색기의 아주 큰 아이콘.

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를 ICO로 변환하는 이유는 로고는 벡터로 있는데, 웹사이트 루트, Windows 바로 가기, 데스크톱 앱이 여전히 여러 비트맵 크기를 담은 .ico 파일 하나를 요구하기 때문입니다.

SVG ICO 변환 전에 SVG 준비하기

권장	비권장
viewBox를 `0 0 512 512`처럼 정사각형으로 설정합니다.	32 px 미만에서 사라지는 아주 가는 선에 의존하기.
마크가 아이콘 가장자리에 닿지 않도록 작은 여백을 둡니다.	가는 얼룩처럼 뭉개지는 가로로 긴 워드마크를 그대로 두기.
글꼴이 바뀌지 않도록 텍스트를 윤곽선으로 변환합니다.	SVG 안에서 외부 이미지나 웹 글꼴을 참조하기.
전체 이름이 아니라 심볼이나 이니셜을 씁니다.	어두운 탭에서도 흰 배경을 원하는 것이 아니라면 로고 뒤에 흰색 사각형 넣기.

변환기는 SVG에 기술된 것만 렌더링하므로, 링크된 에셋이나 포함되지 않은 글꼴은 불러올 수 없습니다. Figma, Illustrator, Inkscape 같은 디자인 도구는 텍스트를 패스로 내보낼 수 있습니다. 그렇게 하면 글자가 어디서나 브랜드와 똑같이 보입니다.

.ico가 완성되면 Apple 터치 아이콘용 180 px PNG와, 벡터 파비콘을 지원하는 브라우저용 SVG 자체를 추가하십시오. SVG PNG 변환으로 원하는 크기의 PNG를 만들 수 있습니다. 원본이 비트맵 로고라면 PNG ICO 변환이 픽셀에서 같은 작업을 합니다.

SVG ICO 변환 자주 묻는 질문

PNG가 아니라 SVG에서 ICO로 변환하는 이유는 무엇입니까?

PNG는 아이콘 크기마다 축소해야 하고, 축소하면 가장자리가 흐려집니다. SVG는 16, 32, 64, 128, 256 px로 직접 렌더링되므로 크기마다 해당 픽셀 격자에 맞는 선명한 가장자리를 얻습니다.

사이트에 SVG 아이콘이 있어도 favicon.ico가 필요합니까?

Chrome과 Firefox는 link 태그로 선언한 SVG 파비콘을 읽지만, 많은 브라우저, 피드 리더, 크롤러는 여전히 기본으로 사이트 루트의 /favicon.ico를 요청합니다. 둘 다 제공하면 모든 경우를 지원합니다.

SVG가 정사각형이 아니면 어떻게 됩니까?

아이콘 칸은 정사각형이므로 가로로 긴 로고는 빈 여백이 생기거나 아주 작아 보입니다. 먼저 viewBox의 너비와 높이를 같게 수정하거나, PNG로 내보낸 뒤 사진 자르기 도구로 정사각형 버전을 잘라 내십시오.

ICO에서 투명 배경이 유지됩니까?

네. ICO는 알파 채널을 저장하므로 SVG에서 채우기가 없는 영역은 투명하게 남고, 아이콘이 밝은 브라우저 탭과 어두운 탭 모두에 깔끔하게 놓입니다.

Windows 프로그램이나 폴더 아이콘용으로 SVG를 ICO로 변환할 수 있습니까?

네, 같은 파일을 쓸 수 있습니다. Windows는 탐색기의 큰 아이콘과 아주 큰 아이콘 보기에 256 px 이미지를, 목록과 작업 표시줄에는 더 작은 항목을 읽습니다.

16 px에서 아이콘이 비어 보이는 이유는 무엇입니까?

가는 선과 작은 글자는 그 크기에서 사라집니다. 512단위 아트보드의 2단위 선은 16 px 아이콘에서 1픽셀에 한참 못 미치게 렌더링됩니다. 파비콘에는 선을 두껍게 하거나 더 단순한 마크를 쓰십시오.

SVG ICO 변환

이미지 변환