SVG를 ICO로 변환 Scalable Vector Graphics ↔ Icon 무료 온라인 안전

사람들이 SVG를 ICO로 변환하는 이유

ICO 파일은 아이콘입니다. 브라우저 탭의 페이지 이름 옆, 북마크 목록, 바로 가기, 윈도우의 프로그램 창 모서리에 나타나는 작은 그림입니다. 웹사이트를 운영한다면 자기 표식을 단 아이콘을 원할 것입니다. 프로그램을 만든다면 실행 파일에 쓸 아이콘이 필요합니다. 그리고 로고가 있다면 SVG 형식의 벡터 그림일 가능성이 매우 높습니다. 그래서 사람들이 SVG를 ICO로 변환합니다. 표식의 그림은 있고, 브라우저와 운영체제가 아직도 이름까지 지정해 요구하는 아이콘 파일이 필요하기 때문입니다.

SVG는 그림이 아닙니다. 그림을 그리는 지시의 모음입니다. 여기에 원을, 저기에 곡선을 그리고, 이 모양을 저 색으로 채우라는 식입니다. 픽셀이 아니라 지시이기 때문에 SVG는 어떤 크기로도 흐려지지 않고 보여 줄 수 있습니다. 반면 아이콘은 각각 특정 크기를 위해 만들어진 작은 그림 몇 장을 한 파일에 묶은 것입니다. 이 페이지는 SVG의 지시를 크기마다 한 번씩 따르고 결과를 하나의 ICO 파일로 포장합니다.

이 페이지는 브라우저 안에서 SVG를 ICO로 변환합니다. 그림은 파일 안의 어떤 것도 실행될 수 없는 샌드박스에서 렌더링되며 아무것도 업로드되지 않습니다. 아래에는 작동 방식, 파일에 든 크기, 작은 아이콘이 특별한 문제가 되는 이유와 그에 대한 대처가 있습니다.

변환이 작동하는 방식

한 파일에 여섯 가지 크기

나오는 ICO는 한 파일에 여섯 가지 크기, 곧 16, 32, 48, 64, 128, 256 픽셀을 담고 있습니다. 각각은 서로를 줄이는 것이 아니라 SVG에서 다시 그려지므로, 16픽셀 버전은 16픽셀에서 지시를 따른 것이지 큰 것의 축소 사본이 아닙니다. 모두 투명도를 유지합니다. 그러면 운영체제나 브라우저가 아이콘이 표시되는 자리에 맞는 크기를 고릅니다.

아무것도 실행될 수 없는 샌드박스

SVG 파일은 원칙적으로 스크립트와 다른 것에 대한 참조를 담을 수 있습니다. 이것이 위험이 되지 않도록 그림은 파일 안의 어떤 것도 실행될 수 없는 샌드박스에서 렌더링됩니다. 모양만 칠해집니다. 완전히 믿지 못하는 곳에서 내려받은 파일이라도 안전합니다.

왜 줄이는 것보다 다시 그리는 것이 나은가

큰 그림을 작은 그림으로 줄이면 세부가 서로 섞이고 선이 회색이 됩니다. 목표 크기에서 벡터 지시로 다시 그리면 선이 픽셀 격자에 직접 놓이므로 각 크기가 가질 수 있는 가장 선명한 결과가 나옵니다.

유지되는 것

여섯 가지 크기

16, 32, 48, 64, 128, 256 픽셀을 받으며, 아이콘이 보통 표시되는 자리인 브라우저 탭, 작업 표시줄, 바탕화면 바로 가기, 파일 목록, 큰 미리보기를 포괄합니다.

투명도

투명도는 여섯 가지 크기 모두에서 유지됩니다. SVG에서 채우기가 없는 영역은 ICO에서도 비쳐 보이므로 아이콘은 뒤에 있는 것의 색을 띱니다.

표식의 모양

그림은 색과 모양 그대로 유지됩니다. SVG가 정사각형이 아니면 늘어나지 않고 각 아이콘의 정사각형 안에 맞춰집니다.

SVG를 ICO로 변환하기 전에 알아 둘 것

아이콘은 다른 그림입니다

아이콘은 작은 그림이 아니라 다른 그림입니다. 가는 선이나 작은 글자가 있는 것은 아무리 정성껏 렌더링해도 16픽셀에서 뭉개집니다. 포스터에서 훌륭해 보이는 로고가 파비콘으로는 읽을 수 없을 수 있습니다. 결과가 탁해 보이면 답은 더 나은 변환이 아니라 더 단순한 SVG입니다.

가장 작은 크기를 위해 디자인하기

가장 좋은 아이콘은 가장 작은 크기를 염두에 두고 만들어집니다. 굵은 모양 하나, 제한된 수의 색, 머리카락 같은 선 없음, 한 글자를 넘는 글자 없음입니다. 가능하면 이 용도의 단순화한 로고를 별도의 SVG로 준비하고 그것으로 SVG를 ICO로 변환하십시오.

다른 곳의 글꼴과 이미지는 해결되지 않습니다

SVG가 다른 곳에서 가져오는 글꼴과 이미지는 샌드박스에서 해결되지 않습니다. 서버에서 불러오는 웹 글꼴로 설정한 글자는 시스템 글꼴로 대체되고, 파일 밖에서 연결한 그림은 빠집니다. 가장 좋은 결과를 위해 글자를 윤곽선으로 바꾸고 그림을 내장하십시오.

여기서 SVG를 ICO로 변환하는 방법

그림 추가하기

SVG를 페이지에 끌어다 놓거나 기기에서 고르십시오. 브라우저 안에서 읽으며 업로드되지 않습니다.

변환

버튼을 누르십시오. 여섯 가지 크기가 차례로 그려지며 잠깐 걸립니다. 끝날 때까지 페이지를 열어 두십시오.

내려받아 시험하기

ICO를 내려받아 쓸 곳에서 시험해 보십시오. 웹사이트에서는 루트 폴더에 favicon.ico라는 이름으로 두거나 페이지 헤드에서 연결하고 브라우저 탭을 보십시오. 윈도우에서는 바로 가기에 지정해 여러 크기에서 어떻게 보이는지 볼 수 있습니다.

SVG와 ICO를 자세히 보기

벡터와 묶음

SVG는 어떤 크기로도 렌더링할 수 있는 하나의 그림입니다. ICO는 각각 고정된 크기의 여러 그림이 들어 있는 컨테이너입니다. 아이콘을 보여 주는 소프트웨어는 필요한 크기에 가장 가까운 그림을 골라 흐린 확대·축소를 피합니다. SVG를 ICO로 변환한다는 것은 컨테이너가 담을 것으로 기대되는 크기로 그림을 렌더링하는 것입니다.

아이콘이 쓰이는 곳

브라우저는 탭에 가장 작은 크기를, 북마크와 새 탭 페이지에 더 큰 크기를 씁니다. 윈도우는 작업 표시줄, 시작 메뉴, 탐색기에 씁니다. 모바일 기기는 홈 화면용으로 자체 그림 크기 세트를 가지며 보통 ICO가 아니라 PNG 파일입니다. 휴대폰용 앱 아이콘을 준비한다면 플랫폼이 요구하는 크기로 SVG를 PNG로 변환하는 것이 더 나은 길입니다.

오늘날의 파비콘

최신 브라우저는 PNG는 물론 SVG까지 파비콘으로 받아들이지만, ICO는 오래된 브라우저, 일부 피드 리더, favicon.ico를 자동으로 찾는 도구를 포함해 어디서나 통하는 형식으로 남아 있습니다. 하나를 갖춰 두는 것이 안전한 선택입니다.

상황별로 자세히

웹사이트의 파비콘

SVG를 ICO로 변환하고 파일을 사이트 루트에 favicon.ico로 저장해 연결하십시오. 모든 브라우저의 탭이 표식을 달게 되어 많은 열린 탭 속에서 페이지를 알아볼 수 있습니다.

윈도우 프로그램의 아이콘

윈도우 프로그램은 실행 파일과 바로 가기에 아이콘을 지닙니다. 개발자에게는 이를 위한 다중 크기 ICO가 필요합니다. 받는 여섯 가지 크기가 일반적인 요구 사항을 포괄합니다.

바로 가기와 폴더

윈도우에서는 바로 가기나 폴더에 자기 아이콘을 줄 수 있습니다. 로고로 만든 ICO는 바탕화면이나 프로젝트 폴더를 알아보기 쉽게 만듭니다.

소규모 사업 사이트와 블로그

파비콘은 사이트를 완성된 느낌으로 만드는 작은 디테일입니다. 로고가 SVG라면 이 변환이 사이트 빌더가 올리라고 요구하는 파일을 만들어 줍니다.

SVG를 ICO로 변환하기 전의 실용적 조언

그림 단순화하기

가는 선을 없애고, 글자를 빼거나 한 글자만 남기고, 굵은 모양을 쓰십시오. 변환하기 전에 그리기 프로그램에서 SVG를 16픽셀로 보고 가장 작은 아이콘이 어떻게 보일지 확인하십시오.

그림을 정사각형으로 만들기

아이콘은 정사각형입니다. 로고가 가로로 넓다면 잘리지 않고 정사각형 안에서 작아지지도 않도록 약간의 여백을 둔 정사각형 캔버스에 놓으십시오.

대비 확인하기

브라우저 탭은 밝거나 어두울 수 있습니다. 두 배경에 모두 강한 대비가 있는 표식이 보기 쉽습니다. 어두운 표식에 두른 가는 흰 윤곽선이나 꽉 찬 색 모양이 보통 통합니다.

SVG 보관하기

SVG가 원본입니다. 나중에 아이콘을 바꾸기로 하면 SVG를 ICO로 다시 변환하는 데 그것이 필요합니다.

변환하기 전에 사람들이 묻는 질문

왜 내 아이콘이 16픽셀에서 흐릿한가요?

16픽셀은 아주 적기 때문입니다. 가는 선과 작은 글자는 거기서 표현될 수 없습니다. 더 나은 변환을 찾는 대신 그림을 단순화하십시오.

파일에는 어떤 크기가 들어 있나요?

16, 32, 48, 64, 128, 256 픽셀이며 각각 SVG에서 다시 그려지고 모두 투명도가 있습니다.

투명도가 유지되나요?

네. SVG의 비쳐 보이는 배경은 ICO의 여섯 가지 크기 모두에서 비쳐 보입니다.

파일을 파비콘으로 쓸 수 있나요?

네. favicon.ico라고 이름 짓고 사이트 루트에 두거나 페이지 헤드에서 연결하십시오.

내 파일이 업로드되나요?

아니요. 변환은 브라우저 안에서 실행되며 파일은 기기를 떠나지 않습니다.

아이콘으로 SVG를 만들 수 있나요?

어느 정도는 가능합니다. ICO를 SVG로 변환은 아이콘을 모양으로 추적하지만 작은 크기가 복원할 수 있는 것을 제한합니다.

SVG를 ICO로 변환할 때 현명하게 고르기

ICO인가 PNG인가?

어디서나 통하는 파비콘에는 ICO를 고르십시오. 휴대폰의 앱 아이콘과 웹 페이지의 그림에는 PNG가 보통의 형식입니다. SVG를 PNG로 변환이 그것을 줍니다.

전체 세트를 생각하기

브랜드를 준비한다면 PNG 로고, ICO 파비콘, PDF 인쇄용 버전이 필요할 수 있습니다. SVG를 PDF로 변환은 인쇄를 위해 그림을 그림으로 유지합니다.

실제 탭에서 시험하기

실제 브라우저 탭에서 밝은 테마와 어두운 테마 모두로 아이콘을 보십시오. 대부분의 사람이 그것을 만나는 곳이 그곳입니다.

변환 뒤에 좋은 결과 얻기

브라우저 캐시 지우기

브라우저는 파비콘을 오래 보관합니다. 아이콘을 교체했는데 여전히 옛것이 보이면 캐시를 지우거나 사이트를 비공개 창에서 여십시오.

모든 크기 확인하기

ICO 파일을 여는 도구가 있다면 각 크기를 보십시오. 256픽셀에서 괜찮은 표식이 16에서는 읽을 수 없을 수 있으며, 그것이 단순화해야 하는지 알려 줍니다.

이름을 올바르게 붙이기

브라우저는 기본적으로 사이트 루트에서 favicon.ico를 찾습니다. 파일을 명시적으로 연결하지 않는 한 그 이름을 유지하십시오.

가장 작은 크기에서 살아남는 표식 디자인하기

16픽셀 격자에서 시작하기

SVG를 ICO로 변환할 때 좋은 결과를 얻는 가장 믿을 만한 방법은 가장 작은 크기를 염두에 두고 디자인하는 것입니다. 열여섯 곱하기 열여섯 칸의 격자를 상상하고 그 위에 무엇을 놓을 수 있는지 물어보십시오. 원, 글자, 단순한 기호는 됩니다. 서명이나 표어가 있는 문장은 안 됩니다. 더 큰 크기는 무엇을 그리든 괜찮아 보이므로 작은 크기가 디자인해야 할 제약입니다.

강한 모양과 적은 색 쓰기

뚜렷한 대비의 두세 가지 색이 많은 색의 그라데이션보다 잘 읽힙니다. 정사각형 대부분을 채우는 꽉 찬 모양은 가는 윤곽선보다 알아보기 쉬운데, 각 픽셀이 표식의 더 많은 부분을 나르기 때문입니다.

숨 쉴 여백 남기기

정사각형 가장자리에 닿는 표식은 답답해 보일 수 있고 일부 시스템은 자체 둥글림이나 테두리를 더합니다. 가장 작은 크기에서 한두 픽셀의 여백은 모양을 온전하게 지켜 줍니다.

다른 아이콘 옆에서 보기

잘 알려진 사이트의 탭을 몇 개 열어 견주어 보십시오. 가장 잘 통하는 아이콘이 아주 단순하다는 것을 보게 될 것입니다. SVG를 ICO로 변환하기 전에 그 절제를 빌리면 결과가 탭의 군중 속에서도 버틸 것입니다.

개인정보와 취급

그림에 로컬 변환이 중요한 이유

로고와 브랜드 표식은 공개되기 전에는 기밀일 수 있습니다. 많은 온라인 변환기는 파일을 서버에 업로드해 처리하고 결과를 돌려보내며, 한동안 사본이 통제할 수 없는 기계에 남습니다. 여기서는 여러분의 브라우저가 일하므로 그림은 기기에 남습니다.

떠나면 어떻게 되나

페이지를 닫으면 변환된 파일은 브라우저에서 사라지므로 먼저 내려받으십시오. 그림에 관한 어떤 것도 보관되지 않습니다.

문제가 생겼을 때

아이콘이 비어 나옵니다

SVG에 크기나 뷰 박스가 없을 수 있습니다. 텍스트 편집기에서 열어 너비와 높이 또는 뷰 박스가 있는지 확인하거나 그리기 프로그램에서 고치십시오.

아이콘이 잘렸습니다

일부 SVG에는 선언된 영역 밖으로 뻗는 요소가 있습니다. 모든 것이 안에 들어가도록 원본의 뷰 박스를 조정하십시오.

페이지가 멈춥니다

모든 것이 기기에서 실행됩니다. 컴퓨터에서 다시 해 보거나 더 단순한 그림으로 해 보십시오.

관련 도구

같은 계열의 도구가 이웃한 일을 다룹니다. 원하는 크기의 그림에는 SVG를 PNG로 변환이나 SVG를 JPG로 변환을 쓰십시오. 어떤 확대에서도 선명한 문서에는 SVG를 PDF로 변환이 그림을 그림으로 유지합니다. 그림을 모양으로 다시 추적하려면 ICO를 SVG로 변환, PNG를 SVG로 변환, JPG를 SVG로 변환이 해냅니다.

계산 예

작은 블로그를 시작했고 로고가 아래에 블로그 이름이 있는 초록 잎 하나의 SVG라고 해 봅시다. SVG를 여기에 끌어다 놓고 버튼을 누릅니다. ICO가 도착하고 브라우저 탭에서 잎은 알아볼 수 있지만 그 아래의 이름은 읽을 수 없습니다. 그리기 프로그램을 열어 잎만 있는 버전을 만들고, SVG를 ICO로 다시 변환해 새 파일을 favicon.ico로 올립니다. 이제 탭에는 뚜렷한 초록 잎이 보이고 전체 로고는 페이지에 남습니다.

짧은 점검표

변환하기 전에

그림을 단순화하십시오. 정사각형으로 만드십시오. 글자는 윤곽선으로 바꾸고 그림은 내장하십시오.

변환하는 동안

파일이 준비될 때까지 페이지에 머물러 있으십시오.

변환한 뒤에

밝은 테마와 어두운 테마로 브라우저 탭과 바로 가기에서 ICO를 시험하고 SVG를 보관하십시오.

흔한 실수

전체 로고 쓰기

글자와 미세한 디테일은 16픽셀에서 사라집니다. 단순화한 표식을 쓰십시오.

더 나은 변환이 복잡한 그림을 고쳐 주기를 기대하기

잘못은 도구가 아니라 크기에 있습니다. SVG를 단순화하십시오.

캐시를 잊기

옛 파비콘이 브라우저에 남아 있을 수 있습니다. 새것이 실패했다고 결론짓기 전에 캐시를 지우십시오.

그림은 기기에 남습니다

변환은 로컬에서 이루어집니다. 그림은 여러분의 브라우저가 읽고, 거기서 칠하고, ICO로 돌려줍니다. 아무것도 업로드되지 않으므로 서버에 사본이 남지 않고 다른 누구도 볼 수 없습니다. 공개되지 않은 브랜드 표식에는 이것이 SVG를 ICO로 변환하는 안전한 방법입니다.

요약

여기서 SVG를 ICO로 변환하려면 그림을 끌어다 놓고 버튼을 누르십시오. SVG는 그림이 아니라 그림을 그리는 지시이며, 여기서는 그 지시를 크기마다 한 번씩 따르고 결과를 ICO로 저장합니다. 그림은 파일 안의 어떤 것도 실행될 수 없는 샌드박스에서 렌더링되며 아무것도 업로드되지 않습니다. 파일에는 16, 32, 48, 64, 128, 256 픽셀의 여섯 가지 크기가 들어 있고, 각각 서로를 줄인 것이 아니라 SVG에서 다시 그려지며, 모두 투명도가 있습니다. 아이콘은 작은 그림이 아니라 다른 그림입니다. 가는 선이나 작은 글자가 있는 것은 아무리 정성껏 렌더링해도 16픽셀에서 뭉개집니다. 결과가 탁해 보이면 답은 더 나은 변환이 아니라 더 단순한 SVG입니다. 다른 곳에서 가져오는 글꼴과 이미지는 해결되지 않습니다.