아이콘·로고 파일 용도별 포맷 변환 완벽 가이드 — PNG·SVG·ICO 선택 기준과 실전 방법
아이콘과 로고를 디자인했는데, 웹사이트에는 PNG가 필요하고, 앱에는 SVG가 좋다더니, 파비콘은 ICO여야 한다는 말까지 들립니다. PNG, SVG, ICO—어떤 상황에서 어떤 포맷을 써야 하고, 어떻게 변환해야 화질을 지키면서도 파일 크기를 최적화할 수 있을까요? 이 글에서는 각 포맷의 본질적 차이부터 용도별 선택 기준, 그리고 변환 과정의 구체적인 단계와 흔한 실수까지 모두 다루겠습니다.
아이콘·로고 포맷 3가지의 근본적 차이 이해하기
PNG, SVG, ICO는 단순히 파일 확장자의 차이가 아니라, 이미지를 저장하고 표현하는 방식이 완전히 다릅니다. 이 차이를 정확히 알아야 어떤 상황에서 어떤 포맷을 골라야 할지 판단할 수 있습니다.
PNG는 래스터 포맷으로, 픽셀 하나하나의 색상 정보를 저장합니다. 고정된 가로×세로 픽셀 수로 이루어져 있기 때문에, 원본 크기보다 크게 늘리면 계단 현상(앨리어싱)이 발생합니다. 하지만 반대로 작게 축소할 때는 화질 손실이 적습니다. PNG는 무손실 압축을 지원하므로 투명도(알파 채널)를 완벽하게 보존하면서도 화질 저하 없이 저장할 수 있습니다. 파일 크기는 중간 수준입니다.
SVG는 벡터 포맷
ICO는 윈도우 아이콘 포맷
각 포맷의 특성을 알았다면, 이제 구체적인 상황에서 어떤 포맷이 가장 적합한지 판단해 봅시다. 용도에 맞지 않는 포맷을 선택하면 화질 손실, 불필요한 파일 크기 증가, 또는 기술적 한계에 부딪히게 됩니다. 웹사이트의 네비게이션·UI 아이콘은 SVG가 최고입니다. 반응형 디자인에서 아이콘 크기가 수시로 변하는데, SVG라면 어떤 크기에서도 완벽하게 선명합니다. 또한 CSS로 색상을 동적으로 바꾸거나, 마우스 호버 시 애니메이션을 넣을 수 있습니다. 파일 크기도 대부분 5KB 이하로 매우 작습니다. 예를 들어, 검색 아이콘, 메뉴 버튼, 소셜 미디어 링크 아이콘 모두 SVG로 준비하면 최적화됩니다. 사진이나 복잡한 그래디언트가 있는 로고는 PNG를 쓰세요. 예를 들어, 배경이 사진인 로고나 복잡한 음영 효과가 있는 로고는 SVG로 표현하기 어렵습니다. 이 경우 PNG로 준비하되, 웹용으로는 72~96 DPI에 배경 투명으로 저장하고, 인쇄용으로는 300 DPI에 CMYK 색공간으로 따로 만드세요. 웹용 PNG는 보통 200×200~500×500 픽셀 크기로 충분합니다. 파비콘(브라우저 탭 아이콘)은 ICO 또는 PNG 아이콘이 필수입니다. 최신 브라우저는 PNG 파비콘도 지원하지만, 구형 브라우저 호환성을 위해서는 ICO가 안전합니다. 크기는 16×16, 32×32, 64×64 픽셀을 포함해야 하며, 주소창에 표시되는 16×16 버전이 가장 중요합니다. 너무 복잡한 디자인은 이 작은 크기에서 알아보기 어려워지므로, 단순하고 대비가 높은 로고를 선택하세요. 모바일 앱 아이콘도 용도에 따라 다릅니다. iOS(Apple)는 투명도 없는 채운 PNG가 필요하고, Android는 투명 PNG를 선호합니다. 앱 스토어 디스플레이 아이콘과 실제 앱 내 UI 아이콘의 크기 요구사항이 다르므로, 각각 다른 해상도(1x, 2x, 3x 배수)로 여러 버전을 만들어야 합니다. 인쇄 물품(명함, 브로슈어, 간판)용 로고는 반드시 SVG 원본에서 변환하거나, 고해상도 PNG가 필요합니다. 인쇄는 300 DPI 이상이 권장되므로, 예를 들어 3인치 크기 로고라면 900×900 픽셀 이상의 PNG가 필요합니다. SVG가 있다면 처음부터 벡터 상태에서 CMYK로 변환한 PDF나 EPS 파일로 제작하는 것이 가장 좋습니다. SVG 아이콘·로고를 PNG로 변환할 때는 단순히 이름만 바꾸면 안 됩니다. 올바른 절차를 따라야 화질과 투명도를 완벽하게 보존할 수 있습니다. 첫 번째: 변환할 SVG 파일의 크기와 필요한 픽셀 수를 계산합니다. 웹용 아이콘이라면 64×64, 128×128, 256×256 픽셀 등 2의 거듭제곱 크기로 준비하는 것이 브라우저 캐싱 최적화에 도움이 됩니다. 인쇄용이라면 최대 인쇄 크기에 300을 곱한 값을 픽셀 수로 설정하세요. 예를 들어, 5cm×5cm 로고를 인쇄한다면 약 590×590 픽셀(5cm = 1,968픽셀 ÷ 3.33 = 590px)이 필요합니다. 두 번째: 배경 투명도 설정을 확인합니다. 대부분의 변환 도구는 기본값으로 투명 배경을 유지하지만, 설정에서 확인하세요. 로고나 아이콘은 거의 항상 투명 배경이 필요합니다. 만약 흰색 배경이 필요한 경우라면 따로 옵션을 선택해야 합니다. 세 번째: 색상 프로필을 선택합니다. 웹용은 sRGB, 인쇄용은 CMYK를 선택하세요. sRGB는 모니터와 웹 브라우저의 표준 색공간이고, CMYK는 인쇄 기계의 색공간입니다. 같은 로고도 색공간에 따라 색상이 미묘하게 달라질 수 있으므로 중요합니다. 네 번째: 최종 PNG 파일의 압축률을 결정합니다. PNG는 무손실 압축이므로 화질 손실 걱정은 없지만, 압축률을 높일수록 파일 크기가 작아집니다. 보통 압축률 9(최고)를 선택해도 화질에는 영향 없으므로, 웹용은 항상 최고 압축을 권장합니다. 웹사이트 파비콘은 사용자의 브라우저 탭에 항상 보이는 중요한 브랜드 요소입니다. 정확한 변환과 설정이 필요합니다. 파비콘 크기 요구사항을 정확히 알아둡시다. 모던 웹에서는 다양한 크기가 필요합니다. ICO 파일은 최소 16×16(브라우저 탭용), 32×32(주소창용), 64×64(Windows 작업표시줄용)를 포함해야 합니다. 또한 Apple 기기를 위해 180×180 픽셀의 PNG 파일도 별도로 준비하세요(apple-touch-icon.png). Android 기기용으로는 192×192, 512×512 PNG도 필요합니다. PNG를 ICO로 변환할 때 주의할 점입니다. 원본 PNG는 적어도 256×256 픽셀 이상이어야 하고, 여러 크기로 다운샘플링할 때 품질이 최대한 유지되는 도구를 선택해야 합니다. 온라인 변환 도구보다는 이미지 편집 소프트웨어에서 변환하는 것이 더 안정적입니다. HTML에서 파비콘을 올바르게 연결하세요. 다음과 같이 <head> 섹션에 여러 줄을 추가합니다: <link rel="icon" type="image/x-icon" href="/favicon.ico"> 이렇게 하면 Windows, 안드로이드, iOS 등 모든 플랫폼에서 최적의 파비콘이 표시됩니다. 아이콘·로고 변환 과정에서 많은 사람들이 같은 실수를 반복합니다. 이를 미리 알고 피하면 재작업을 줄일 수 있습니다. 실수 1: SVG의 텍스트를 경로로 변환하지 않고 PNG로 변환하기 — SVG 파일에 텍스트가 포함되어 있고, 그 텍스트가 경로(path)로 변환되지 않았다면, PNG 변환 도구가 텍스트를 제대로 렌더링하지 못할 수 있습니다. 해결책은 SVG 파일을 Adobe Illustrator나 Inkscape에서 열고, 텍스트를 모두 경로로 변환(텍스트 → 경로로 변환)한 후 저장하는 것입니다. 실수 2: 웹용으로 너무 큰 해상도의 PNG 만들기 — 네비게이션 아이콘이 화면에 48×48 픽셀로 표시되는데, 512×512 PNG를 만들면 불필요한 용량 낭비입니다. 웹용 PNG는 표시 크기의 2배(레티나 디스플레이 대응) 정도면 충분합니다. 즉, 48픽셀 아이콘이라면 96×96 PNG만 준비하세요. 실수 3: 인쇄용 로고를 DPI 없이 픽셀만 변환하기 — PNG는 픽셀 기반이라 DPI 정보를 포함할 수 있지만, 변환할 때 DPI를 제대로 설정하지 않으면 인쇄소에서 문제가 발생합니다. 인쇄용 로고는 300 DPI로 설정된 고해상도 PNG나 PDF로 별도 준비하세요. 실수 4: 투명 배경이 필요한데 흰색 배경으로 저장하기 — 웹에 올릴 아이콘인데 배경이 흰색이면, 회색 배경의 페이지에 올렸을 때 어색해 보입니다. 투명도를 지원하는 포맷(PNG, SVG)을 선택했다면, 변환 도구의 "투명 배경 유지" 옵션을 반드시 확인하세요. 실수 5: 색상 프로필 혼용으로 색상이 달라 보이기 — sRGB와 CMYK, 또는 다른 색공간을 혼용하면 같은 파일도 다양한 화면과 인쇄기에서 색이 다르게 보입니다. 각 용도별로 색공간을 일관되게 유지하세요. 여러 아이콘과 로고를 빠르고 정확하게 변환해야 한다면, editpixel의 이미지 변환 도구를 추천합니다. 브라우저에서 바로 SVG, PNG, ICO를 비롯한 다양한 포맷을 상호 변환할 수 있으며, 해상도, 색공간, 투명도, 압축 설정을 한 곳에서 제어할 수 있습니다. 특히 여러 개의 파일을 한 번에 처리할 때 시간을 크게 절약할 수 있습니다. 아이콘·로고 포맷 변환은 단순한 파일명 변경이 아니라, 각 포맷의 본질과 용도를 이해한 전략적 선택입니다. 웹에는 SVG, 복잡한 로고는 PNG, 파비콘은 ICO라는 기본 원칙을 지키고, 각 상황에 맞춰 세부 설정을 조정한다면, 모든 플랫폼과 화면 크기에서 최고의 결과를 얻을 수 있습니다.
포맷
이미지 방식
확대 시 화질
투명도 지원
파일 크기
편집 난이도
PNG
래스터
저하됨
완벽 지원
중간
쉬움
SVG
벡터
저하 없음
완벽 지원
심플함 (복잡함 주의)
어려움
ICO
래스터 (복합)
저하됨
지원 (제한적)
작음
어려움
용도별 포맷 선택 기준 — 언제 어떤 포맷을 쓸까
SVG에서 PNG로 변환하는 구체적 단계
PNG에서 ICO로 변환하고 파비콘 설정하기
<link rel="icon" type="image/png" href="/favicon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">포맷 변환 시 흔한 실수와 해결책
editpixel 이미지 변환 도구로 쉽게 처리하기