웹사이트 파비콘 원본 찾기: SVG를 선명한 PNG로 변환하는 방법
Riano의 실제 파비콘 SVG를 찾아 Inkscape로 1024×1024 PNG로 변환한다. 원본 화면, 실행 명령, 크기별 비교 이미지로 해상도와 투명도를 확인하는 방법을 정리한다.
Hun Jang Oct 27, 2026
Riano의 실제 SVG 아이콘을 활용해 구성한 표지.
웹사이트 아이콘이 필요할 때 브라우저 탭을 캡처하면 작고 흐릿한 이미지가 남는다. 파비콘 원본이 SVG로 제공된다면, 그 파일을 찾아 원하는 크기의 PNG로 변환하는 편이 낫다.
이 글에서는 Riano의 실제 파비콘을 확인하고, 1024×1024 PNG로 변환한다. 사이트 화면과 SVG 화면은 직접 캡처했고, 크기 비교에는 실제 변환한 파일을 사용했다.
1. 화면에 보이는 아이콘보다 원본 파일을 찾는다
Riano의 공개 홈페이지. 작은 아이콘을 화면에서 잘라내기보다 페이지가 참조하는 원본을 찾는다.
파비콘은 보통 HTML의 link 요소로 선언된다. 브라우저 개발자 도구의 Elements에서 rel="icon"을 검색하면 어떤 파일을 사용하도록 선언했는지 확인할 수 있다. MDN의 rel=icon 설명도 이 관계를 설명한다.
Riano 홈페이지에서 확인한 선언은 다음과 같다.
여기서는 SVG와 여러 크기의 PNG가 함께 제공된다. 브라우저가 실제로 어떤 아이콘을 선택하는지와 별개로, 이미지를 크게 활용하려면 먼저 SVG의 내용을 확인하는 것이 좋다.
/favicon.svg는 사이트 루트 기준 경로다. 이 사례의 전체 주소는 https://riano.app/favicon.svg이다. 다른 사이트에서는 파일명이 다를 수 있으므로 무조건 같은 경로가 있다고 가정하지 않는다.
2. SVG의 32는 해상도 제한이 아니다
favicon.svg를 브라우저에서 직접 연 실제 화면. 원본을 크게 표시해 곡선과 모양을 확인했다.
이 파일은 다음 좌표계를 사용한다.
viewBox="0 0 32 32"는 그림을 정의하는 좌표 범위다. 32×32 픽셀짜리 비트맵이라는 뜻은 아니다. 실제 파일은 사각형, 경로, 원으로 구성되어 있어 1024×1024로 다시 렌더링할 수 있다.
다만 확장자가 SVG라고 항상 벡터 원본은 아니다. SVG 안에 작은 PNG나 JPEG가 포함돼 있다면 크게 출력해도 그 부분의 세부 정보는 늘어나지 않는다. 이번 Riano 파일에는 그런 래스터 이미지가 포함되어 있지 않았다.
3. Inkscape로 원하는 크기의 PNG를 만든다
먼저 SVG를 저장한다. 아래 명령은 curl이 있는 터미널에서 실행한다. Windows PowerShell에서 별칭 문제를 피하려면 curl.exe를 사용할 수 있다.
변환에는 Inkscape를 사용했다. 설치되어 있고 inkscape 명령을 실행할 수 있다는 전제다.
--export-type=png: 출력 형식
--export-filename: 저장할 파일명
--export-width,--export-height: 출력 이미지의 픽셀 크기
옵션은 Inkscape 공식 명령행 문서에서 확인할 수 있다. 명령을 찾을 수 없다는 오류가 나면 설치 경로나 PATH를 확인하거나 Inkscape 실행 파일의 전체 경로를 사용한다.
이번 아이콘은 정사각형이므로 너비와 높이를 모두 1024로 지정했다. 비율이 다른 SVG에 같은 값을 무조건 적용하지 말고 원본 비율과 출력 결과를 확인한다.
여기서 하는 일은 작은 PNG를 확대하는 것이 아니라 벡터 원본을 목표 픽셀 크기로 새로 그리는 것이다. 반대로 이미 PNG만 가지고 있다면 확장자를 SVG로 바꾸거나 출력 크기만 키워도 벡터 원본이 생기지는 않는다.
4. 32px와 1024px 결과를 비교한다
같은 원본에서 작은 비교 파일도 만들었다.
실제로 생성한 두 PNG를 같은 표시 크기로 배치했다. 왼쪽은 픽셀을 드러내기 위해 최근접 보간으로 확대했고, 오른쪽은 1024px 결과를 줄여 표시했다. 브라우저 기본 확대 방식의 비교는 아니다.
작은 이미지를 확대하면 기존 픽셀이 커진다. 보간 방식을 바꾸면 계단이 부드러워 보일 수는 있지만, 원본에 없던 세부 정보까지 복구되지는 않는다. 크게 쓸 이미지라면 처음부터 SVG를 필요한 크기로 출력하는 편이 단순하다.
실제 변환 결과는 다음과 같이 확인했다.
riano-32.png: 32×32, RGBA
riano-1024.png: 1024×1024, RGBA
- 둥근 사각형 바깥 모서리: 투명 영역 유지
- 사각형 내부의 검은 배경: SVG에 지정된 색상 유지
아래는 변환한 1024×1024 PNG다. 본문 표시 크기는 블로그 레이아웃에 맞게 줄어들 수 있다.
SVG 원본에서 변환한 1024×1024 PNG. 검은 배경은 원본 디자인의 일부이며 배경 제거 작업은 하지 않았다.
가져온 뒤 확인할 것
파일 확장자뿐 아니라 실제 픽셀 크기와 투명도를 확인한다. 검은 배경 위에서만 보면 투명 영역을 놓칠 수 있으므로, 흰 배경이나 체크무늬 배경에서도 살펴보는 것이 좋다.
또한 파일을 내려받을 수 있다는 사실과 자유롭게 사용할 수 있다는 것은 별개다. 타 사이트의 로고를 자신의 서비스 아이콘으로 쓰기 전에 저작권·상표와 사용 조건을 확인해야 한다. 이 글의 Riano 아이콘은 추출·변환 과정을 설명하기 위한 예시다.
확인 환경은 Linux의 Inkscape 1.4이며, 2026년 10월 27일 기준 공개 페이지와 원본 파일을 사용했다. 다른 사이트의 SVG에 외부 폰트·이미지·효과가 포함되어 있다면 변환 후 화면이 원본과 같은지 별도로 확인해야 한다.
BlogPro로 만든 사이트