아이콘·로고 용도별 포맷 선택과 변환 실전 가이드 — PNG·SVG·ICO 언제 어떻게 쓸 것인가
디자이너나 웹 개발자라면 아이콘·로고를 다양한 용도로 활용할 때 포맷 선택 때문에 고민한 경험이 있을 것입니다. PNG로 받은 로고를 SVG로 바꿔야 하고, 또 파비콘을 위해 ICO로도 준비해야 합니다. 그런데 단순히 확장자만 바꾸면 끝이 아닙니다. 각 포맷은 작동 원리와 용도가 완전히 다르며, 잘못 변환하면 깨진 아이콘, 흐릿한 로고, 초과 용량의 파일을 만들게 됩니다. 이 글에서는 PNG·SVG·ICO의 핵심 특성을 정리하고, 용도별로 어떤 포맷을 선택해야 하며, 변환할 때 놓치면 안 되는 실전 팁을 담았습니다.
PNG, SVG, ICO 포맷의 근본적 차이 이해하기
아이콘·로고 포맷을 선택하기 전에 세 포맷이 어떻게 이미지 정보를 저장하는지 알아야 합니다. 이 이해가 없으면 변환 후 예상치 못한 결과를 마주하게 됩니다.
PNG(Portable Network Graphics)는 래스터 형식입니다. 이는 픽셀 단위로 색상 정보를 저장한다는 뜻입니다. 예를 들어 100×100 픽셀 아이콘이라면 10,000개의 픽셀 각각에 색상값이 기록됩니다. PNG는 무손실 압축을 사용하므로 화질 손실이 없고, 알파 채널(투명도)을 완벽히 지원합니다. 하지만 파일을 확대하면 계단 현상이 생기고, 같은 해상도로 여러 크기를 만들어야 한다면 각각 별도 파일이 필요합니다. PNG의 용량은 해상도에 정비례합니다. 192×192 파비콘 PNG는 약 5~15KB, 같은 비율의 512×512 로고 PNG는 20~50KB 정도입니다.
SVG(Scalable Vector Graphics)는 벡터 형식입니다. SVG는 색상과 좌표를 수학식으로 기술하는 XML 텍스트 포맷입니다. 예를 들어 원형 버튼이라면 "중심 (50, 50), 반지름 30, 색상 #FF5733"처럼 저장됩니다. 따라서 원본 해상도와 무관하게 얼마든 확대·축소해도 깔끔합니다. 파일 크기도 복잡도에만 의존하고 해상도에는 무관합니다. 단순한 기하학적 도형이라면 1KB 이하이고, 복잡한 그래디언트가 많으면 수십 KB가 될 수 있습니다. 하지만 SVG는 모든 브라우저에서 지원되지 않을 수 있으며(특히 구형 IE), 사진처럼 복잡한 래스터 이미지는 벡터로 변환할 수 없습니다.
ICO(Icon)는 특수 포맷입니다. ICO는 여러 해상도의 이미지를 하나의 파일로 묶습니다. 예를 들어 16×16, 32×32, 64×64, 256×256 픽셀 이미지를 모두 하나의 .ico 파일 안에 저장합니다. 운영체제가 필요한 크기를 자동으로 선택해 화면에 표시합니다. 파비콘, 윈도우 바로가기 아이콘, 앱 아이콘으로 자주 쓰입니다. ICO도 래스터 포맷이므로 벡터의 확장성은 없지만, 여러 크기를 한 번에 관리할 수 있는 장점이 있습니다.
용도별 포맷 선택 기준 — 웹, 인쇄, 파비콘
아이콘·로고의 최종 사용 장소와 변경 빈도를 기준으로 포맷을 결정해야 합니다.
웹 UI 아이콘(버튼, 메뉴, 상태 표시 등)은 SVG가 최적입니다. 이유는 세 가지입니다. 첫째, 반응형 웹디자인에서 화면 크기가 자동으로 변하는데, SVG는 한 파일로 모든 크기를 커버합니다. 둘째, SVG는 HTML·CSS와 조합해 마우스 호버, 클릭 시 색상 변경 등 상호작용을 쉽게 구현할 수 있습니다. 셋째, 네트워크 전송량이 적습니다. 예를 들어 20개의 UI 아이콘을 각각 PNG로 준비하면 총 200~400KB이지만, SVG 스프라이트 한 파일로 만들면 50~100KB 정도입니다. 단, SVG에 사진 같은 복잡한 그라데이션이 많으면 파일이 비대해지고 렌더링이 느려질 수 있으므로, 단순 기하 도형이 아니면 검토가 필요합니다.
브랜드 로고는 SVG가 주 포맷, PNG가 보조입니다. 브랜드 로고는 웹사이트, 명함, 포스터, 광고판 등 수십 가지 크기와 매체에서 사용됩니다. SVG 한 파일로 모든 사이즈를 커버할 수 있어 관리 효율이 극적으로 높습니다. 또한 로고 재설계나 색상 변경이 필요할 때 벡터는 매우 유연합니다. 다만 인쇄 전문가가 작업할 때는 PNG나 고해상도 래스터 파일을 함께 요청할 수 있으므로, SVG와 함께 고해상도 PNG(최소 2400×2400 픽셀 이상)를 준비하는 것이 좋습니다. 웹에서는 SVG를 로드하되, 레거시 브라우저 대응이 필요하면 이미지 변환 도구로 SVG를 PNG로 변환해 폴백 방식으로 제공합니다.
파비콘(favicon, 웹사이트 탭 아이콘)은 ICO 또는 SVG입니다. 현대 브라우저는 파비콘으로 SVG를 지원하므로, SVG 파비콘을 사용하면 한 파일로 모든 크기를 처리할 수 있습니다. 다만 구형 브라우저·모바일 환경 호환성이 필요하면 ICO 파일도 함께 제공합니다. ICO 파일은 16×16, 32×32, 64×64 픽셀 버전을 모두 포함해야 브라우저가 화면 밀도에 맞춰 표시할 수 있습니다. 안드로이드 홈 화면 아이콘이나 윈도우 작업표시줄은 ICO 또는 PNG 192×192 이상을 사용합니다.
인쇄(포스터, 전단, 명함)는 고해상도 PNG 또는 TIFF입니다. 인쇄물은 일반적으로 300DPI(인치당 픽셀) 이상의 해상도가 필요합니다. 예를 들어 A4 크기 인쇄(210×297mm)라면 2480×3508 픽셀 이상이어야 합니다. SVG는 해상도 개념이 없으므로, 인쇄를 위해서는 반드시 충분히 큰 래스터 포맷으로 변환해야 합니다. PNG는 알파 채널 투명도를 지원하므로 배경이 투명한 디자인에 유용합니다. 인쇄 전문가는 TIFF(무손실)도 요구할 수 있습니다.
PNG와 SVG 상호 변환 시 실전 체크리스트
가장 자주 마주치는 변환은 PNG ↔ SVG입니다. 각 방향의 주의사항을 정리했습니다.
PNG → SVG 변환(자동 추적)은 래스터를 벡터로 바꾸는 작업입니다. "이미지 추적" 또는 "자동 벡터화" 도구를 사용합니다. 이때 주의할 점은 다음과 같습니다:
- 원본 해상도가 충분해야 함: 최소 200×200 픽셀 이상이어야 추적 정확도가 높습니다. 50×50 픽셀 PNG를 추적하면 계단 현상이 심한 벡터가 생깁니다.
- 단순 디자인에 적합: 기하학적 도형, 아이콘, 로고 같은 단순 도형은 잘 추적됩니다. 사진이나 복잡한 그래디언트는 벡터화 후 결과가 실망스러울 수 있습니다.
- 색상 단순도 조정: 추적 도구는 보통 "색상 수" 설정을 제공합니다. 기본값이 256색이지만, 단순 로고라면 16~32색으로 줄이면 파일이 작고 깔끔합니다. 반대로 복잡한 그라데이션이 필요하면 높여야 합니다.
- 엣지(가장자리) 추적 모드**: "고정밀", "표준", "낮은 정밀도" 모드를 선택할 수 있습니다. 단순 아이콘은 "표준", 디테일이 많은 로고는 "고정밀"을 씁니다.
SVG → PNG 변환은 훨씬 간단합니다. SVG를 래스터화하는 것이므로 정보 손실이 없습니다. 다만 주의할 사항이 있습니다:
- 목표 해상도 선택: 웹 UI는 100~200 픽셀 정도, 웹 로고는 300~500 픽셀, 인쇄용은 2000 픽셀 이상입니다. 변환 도구에서 출력 크기를 명시해야 합니다.
- 배경 투명도 유지: SVG 원본이 투명 배경이라면, PNG로 변환할 때 "알파 채널 유지" 또는 "배경 투명" 옵션을 반드시 활성화합니다. 활성화하지 않으면 하얀색 또는 검은색 배경이 생깁니다.
- 안티에일리어싱(다듬기) 확인: 고해상도가 아닌 작은 아이콘(32×32 이하)으로 변환하면 가장자리가 계단처럼 보일 수 있습니다. 이는 픽셀 그리드 정렬 문제이므로, 변환 도구가 "벡터 정렬" 또는 "픽셀 그리드 정렬" 옵션을 제공하면 활성화합니다.
- 여러 해상도 준비: 웹에서는 일반 화면(1×)과 고해상도 디스플레이(2×, 3×) 대응이 필요합니다. 예를 들어 32×32 아이콘이라면 32px, 64px, 96px 세 버전을 준비합니다.
파비콘 ICO 파일 생성과 브라우저 호환성
파비콘은 웹사이트 정체성의 중요한 요소이지만, 브라우저와 환경마다 요구 사항이 다릅니다.
현대 표준은 SVG 파비콘입니다. HTML의 <link rel="icon" href="favicon.svg">로 로드하면, 브라우저가 자동으로 필요한 크기로 렌더링합니다. SVG는 파일 크기도 작고(보통 1~5KB), 다크 모드에 대응하는 색상 변경도 CSS로 간단히 구현할 수 있습니다.
다만 레거시 환경 대응이 필요하면 ICO 파일이 필수입니다. ICO 파일은 한 파일 안에 여러 해상도를 포함합니다. 권장 크기는 다음과 같습니다:
| 해상도 | 용도 | 포맷 |
|---|---|---|
| 16×16 | 브라우저 탭, 주소 표시줄 | ICO, PNG |
| 32×32 | 윈도우 작업 표시줄, 일반 파비콘 | ICO, PNG |
| 64×64 | 윈도우 작업표시줄(고해상도) | ICO, PNG |
| 180×180 | 애플 터치 아이콘(iOS 홈 화면) | PNG |
| 192×192 | 안드로이드 홈 화면, PWA | PNG |
| 256×256 | Windows 시작 메뉴 | ICO, PNG |
ICO 파일을 만드는 단계는 다음과 같습니다. 먼저 벡터 로고(SVG)를 시작점으로 합니다. 이를 16×16, 32×32, 64×64, 256×256 네 가지 크기의 PNG로 변환합니다. 각 PNG는 투명 배경이어야 합니다. 그 다음 이 네 개의 PNG를 하나의 ICO 파일로 묶습니다. 대부분의 이미지 편집 도구나 온라인 변환 서비스가 이 작업을 지원합니다.
ICO 생성 시 주의사항은, 작은 크기(16, 32)의 경우 로고 디테일을 과하게 줄여야 한다는 점입니다. 256×256에서 이쁜 디자인이라도 16×16으로 축소하면 복잡하거나 가늘어 보일 수 있습니다. 이런 경우 작은 크기용으로 별도 심화된(simplified) 버전을 만들기도 합니다. 예를 들어 회사 로고가 복잡한 일러스트라면, 파비콘용으로는 이니셜이나 심볼만 뽑아 쓰는 식입니다.
실전 포맷 변환 워크플로 — 단계별 체크리스트
실제 프로젝트에서 따를 수 있는 체계적인 워크플로를 제시합니다.
1단계: 원본 자산 정의. 로고·아이콘의 원본은 항상 SVG 또는 고해상도 PNG(최소 2000×2000)여야 합니다. 만약 작은 PNG만 받았다면 불가능하게 손상된 상태이므로, 원본 작업 파일(AI, PSD, Figma)을 요청해야 합니다.
2단계: 용도 목록 작성. 이 로고·아이콘이 어디에 쓰일지 정리합니다. 예를 들어: "웹사이트 헤더(200px), 파비콘(32px, 64px), 명함 인쇄(고해상도 PNG), 소셜 미디어 프로필(400px)"처럼 구체적으로 적습니다.
3단계: 포맷·크기별로 변환. 용도별로 필요한 포맷과 크기를 결정합니다. 웹 UI는 SVG + 각 크기별 PNG, 파비콘은 ICO + SVG, 인쇄는 고해상도 PNG 또는 TIFF 같은 식입니다.
4단계: 파일 검증. 변환 후 각 파일을 실제 사용 환경에서 테스트합니다. 웹 브라우저에서 크기별로 렌더링 확인, 파비콘은 여러 브라우저와 스마트폰에서 표시 확인, 인쇄 파일은 300DPI 이상 확인 등입니다.
5단계: 파일 관리 시스템 수립. 로고가 재설계되거나 색상이 바뀌면 여러 포맷을 다시 생성해야 하므로, 언제 어떤 버전으로 변환했는지 기록합니다. 예를 들어 "logo_20240115_SVG_original.svg", "logo_20240115_192px.png", "favicon_20240115.ico" 같이 날짜와 규격을 파일명에 담아 관리합니다.
포맷 변환 중 흔한 실수와 해결책
경험상 많은 사람이 같은 실수를 반복합니다.
실수 1: PNG를 벡터로 추적하려고 할 때 해상도가 너무 작음. 50×50 픽셀 PNG는 벡터화 불가능에 가깝습니다. 해결책은 원본 벡터 파일을 찾거나, 새로 제작하는 것입니다.
실수 2: SVG를 PNG로 변환할 때 배경이 흰색 또는 검은색으로 생김. 투명도 옵션을 체크하지 않아서 생기는 문제입니다. 변환 도구에서 "투명 배경 유지", "알파 채널", "배경 없음" 같은 옵션을 찾아 활성화해야 합니다.
실수 3: 파비콘이 브라우저에 표시되지 않거나 낡은 이미지가 표시됨. 브라우저 캐시 때문일 수 있으며, Ctrl+Shift+Delete(캐시 초기화) 후 다시 로드하거나, HTML에 버전 파라미터를 추가합니다. 예: <link rel="icon" href="favicon.ico?v=2">
실수 4: 여러 해상도를 하나의 ICO에 담았는데 작은 크기가 흐림. 256×256 버전을 단순히 축소한 것이 문제입니다. 16×16, 32×32 버전은 따로 손으로 최적화해서 만들어야 선명합니다.
실수 5: SVG 파일이 브라우저에서 깨짐. SVG 코드에 유효하지 않은 XML이나 인코딩 문제가 있을 수 있습니다. SVG를 텍스트 편집기로 열어 구조를 확인하거나, 온라인 SVG 검증 도구를 사용해 문제를 찾습니다.
포맷 선택과 변환을 자동화하기
만약 로고·아이콘을 여러 프로젝트에서 반복적으로 사용한다면, 변환 과정을 자동화하는 것이 생산성을 크게 높입니다.
오픈소스 도구 ImageMagick이나 FFmpeg를 사용해 배치 변환 스크립트를 작성할 수 있습니다. 예를 들어 logo.svg를 자동으로 여러 크기의 PNG와 ICO로 변환하는 스크립트를 짜면, 로고가 바뀔 때마다 스크립트를 한 번만 실행하면 모든 파일이 갱신됩니다.
하지만 개발 환경이 없거나 간단히 처리하고 싶다면, editpixel의 이미지 변환 도구를 사용하는 것이 빠릅니다. SVG를 PNG로, PNG를 ICO로 변환할 때 해상도와 투명도를 설정하고 바로 다운로드할 수 있습니다. 특히 여러 크기를 한꺼번에 생성해야 할 때나, 정확한 투명도 처리가 필요할 때 편리합니다.
최종적으로 아이콘·로고의 포맷 변환은 용도를 명확히 하고, 각 포맷의 특성을 이해한 후 단계별로 진행하면 실수를 줄일 수 있습니다. SVG를 기본으로 하되, 웹은 PNG, 파비콘은 ICO, 인쇄는 고해상도 PNG라는 원칙을 따르면 대부분의 상황에 대응할 수 있습니다.