파비콘 생성
Favicon Generator
ICO·PNG·애플 터치 아이콘·웹 매니페스트를 한 번에 만들고 붙여넣을 HTML까지 제공합니다.
파비콘이 파일 하나이던 시절은 지났습니다. 루트 요청을 받을 .ico, 탭 표시줄용 세 가지 크기의 PNG, iOS가 매니페스트를 보지 않으므로 필요한 애플 터치 아이콘, 안드로이드가 자기 마음대로 정한 모양으로 잘라 내므로 필요한 마스커블 아이콘이 있어야 합니다. 이 도구는 그 전부와 매니페스트, 붙여넣을 마크업까지 만듭니다.
로고를 놓으세요
512×512 이상의 정사각 PNG가 가장 좋습니다. SVG는 먼저 래스터화해야 합니다.
사용 방법
512px 이상의 정사각 로고를 놓습니다
전부 축소해서 만들기 때문에, 세트에서 가장 큰 아이콘의 품질이 원본을 넘지 못합니다.
이름과 짧은 이름을 정합니다
짧은 이름은 홈 화면에서 아이콘 아래에 표시되는 것이고, 안드로이드와 iOS 모두 12자 안팎에서 자릅니다.
테마 색과 스플래시 배경을 고릅니다
매니페스트에 들어갑니다. 테마 색은 안드로이드에서 브라우저 상단을 물들이고, 배경색은 PWA가 실행되어 화면을 그리기 전에 보이는 색입니다.
zip을 받고 마크업을 붙여넣습니다
파일은 사이트 루트에 두고 `<link>` 블록은 `<head>`에 넣습니다. 경로가 어긋나지 않도록 둘을 함께 만듭니다.
자주 묻는 질문
마스커블 아이콘은 무엇에 쓰나요?
안드로이드는 홈 화면 아이콘을 기기가 정한 모양—원, 둥근 사각형, 물방울—으로 잘라 내고 가운데 80%만 보장합니다. 마스커블 아이콘은 여백 설정과 무관하게 항상 10%를 받아서, 잘려도 그림에 닿지 않습니다.
SVG 파비콘을 쓰면 안 되나요?
추가로 쓸 수 있고, 통하는 곳에서는 가장 좋은 선택입니다. 다만 세트를 대신하지는 못합니다. iOS 사파리는 터치 아이콘을 원하고, 안드로이드는 매니페스트 아이콘을 원하며, 루트의 .ico는 어차피 요청됩니다. SVG를 먼저 래스터화해서 PNG를 여기에 넣으세요.
여백은 얼마나 주어야 하나요?
화면을 꽉 채우도록 만든 마크라면 0, 16px에서 숨 쉴 자리가 필요한 로고타입이라면 10~15%입니다. 여백이 가장 비싼 곳은 탭 표시줄 크기입니다. 내줄 자리가 거의 없기 때문입니다.
이 도구로 이어지는 것
SVG 최적화
SVG Optimiser
편집기 잔여 데이터를 지우고 변환을 합치며 좌표 자릿수를 줄이고, 결과를 나란히 비교합니다.
ICO 변환
ICO Converter
이미지로 여러 해상도가 담긴 .ico를 만들거나, 기존 .ico 안의 이미지를 꺼냅니다.
SVG PNG 변환
SVG to PNG
SVG를 원하는 배율로 PNG·JPEG·WebP로 렌더링하며 배경을 투명하게 두거나 채울 수 있습니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
ICO 변환
ICO Converter
이미지로 여러 해상도가 담긴 .ico를 만들거나, 기존 .ico 안의 이미지를 꺼냅니다.
이미지 크기 조절
Image Resizer
픽셀·비율·최대 변 길이 기준으로 크기를 바꾸고 가로세로 비율 고정과 일괄 처리를 지원합니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
SVG 최적화
SVG Optimiser
편집기 잔여 데이터를 지우고 변환을 합치며 좌표 자릿수를 줄이고, 결과를 나란히 비교합니다.
이미지 배경 제거
Background Remover
단색이나 균일한 배경을 OKLab에서 키잉해 투명한 PNG로 만들고, 브러시로 경계를 다듬을 수 있습니다.
EXIF 정보 삭제
EXIF Remover
화질은 그대로 두고 카메라·GPS·편집 이력 메타데이터만 지웁니다.