멀티사이즈 파비콘 생성기이란?
이미지 하나를 업로드하거나 1~3글자 또는 이모지를 입력하면 16x16 ICO부터 1024x1024 App Store 아이콘까지 모든 표준 크기와 함께 확대해도 깨지지 않는 favicon.svg까지 받을 수 있습니다. Apple Touch, Android Chrome, MS 타일, Safari 고정 탭 포함. 개별 다운로드하거나 ZIP으로 한번에 받으세요.
직접 만든 로고로 시작하거나, 몇 글자 또는 이모지에 원하는 색과 글꼴을 입혀 빠르게 아이콘을 만들 수 있습니다. 이 도구는 기존 favicon 크기(16·32·48·64·96·128·256), Apple Touch 아이콘(152·167·180), 1024 App Store 아이콘, Android Chrome(192·384), MS Tile(144·150·310), 512 PWA를 모두 포함하는 17개의 PNG를 개별 파일로 만들어 냅니다. 그리드를 플랫폼별로 필터링하고, 출력 모양을 사각형·둥근 모서리·원형 중에서 고르고, 내려받기 전에 라이트·다크 탭에서 파비콘을 확인할 수 있습니다. 각 ZIP 안에는 다중 해상도 favicon.ico, 확대해도 깨지지 않는 favicon.svg, 붙여 넣기만 하면 되는 HTML 스니펫, Android 크기에 maskable purpose가 적용된 manifest.json도 함께 들어 있습니다. 앱 이름과 짧은 이름을 넣으면 PWA로 설치할 수 있습니다.
사용 방법
- 고해상도 정사각형 이미지(최소 512x512px)를 소스로 업로드하세요. 또는 텍스트 모드로 전환해 1~3글자나 이모지를 입력하면 즉시 만들 수 있습니다.
- 그리드에서 모든 크기를 확인하세요. 필요한 플랫폼에 맞게 크기를 켜거나 끄세요.
- 개별 크기를 따로 받거나, 다중 해상도 favicon.ico만 따로 내려받거나, 「모두 다운로드」를 누르면 선택한 크기·ICO 묶음·HTML 스니펫·manifest가 들어 있는 ZIP을 받을 수 있습니다.
사용 시기
- 새 사이트를 출시하면서 모든 브라우저와 OS에 대응하는 파비콘이 필요할 때.
- 리브랜딩: 새 로고로 모든 PWA·홈 화면 아이콘을 다시 생성할 때.
- 홈 화면에 추가 지원을 도입해 Android에서 maskable 아이콘이 올바르게 렌더링되게 할 때.
결과
웹 에이전시가 고객의 브랜드 리뉴얼을 위해 새 로고를 업로드합니다. 데스크톱, iOS Safari, Android Chrome, Windows 타일, PWA 매니페스트 아이콘용 12가지 크기가 바로 사용 가능하게 생성됩니다.
자주 묻는 질문
- 소스 이미지 크기는 어느 정도여야 하나요?
- 최소 512×512픽셀, 정사각형, 로고를 가운데 두고 여백을 약간 두세요. 그보다 작으면 PWA 512 아이콘으로 확대했을 때 흐려집니다. 벡터 소스(SVG를 1024 PNG로 래스터)면 더 좋습니다.
- PNG와 ICO 파비콘이 모두 필요한 이유는?
- 최신 브라우저는 link rel='icon'으로 여러 크기의 PNG를 사용하며, 점점 하나의 확대 가능한 SVG 파비콘을 선호합니다. 반면 .ico 파일은 구형 Windows 브라우저나 일부 호스팅, 고정 사이트 동작 경로에서 여전히 필요합니다. 이 도구는 세 가지를 모두 만들어 줍니다. 모든 최신 크기의 PNG, 확대해도 깨지지 않는 favicon.svg, 그리고 16·32·48px 프레임을 하나로 묶은 favicon.ico까지 함께 제공합니다.
- maskable 아이콘이 무엇이고, Android는 왜 필요하나요?
- Android는 런처에 따라 홈 화면 아이콘을 원형, 스쿼클, 둥근 사각형 등으로 잘라 표시합니다. maskable 아이콘은 가운데에 약 80%의 안전 구역이 있어 로고 핵심 부분이 잘리지 않습니다. 소스 둘레에 약 10%의 패딩을 두세요.
- 생성된 파일은 어디에 두나요?
- 모든 PNG를 사이트의 public 루트(또는 /static)에 넣고, HTML 스니펫을 페이지 head에 붙이고, manifest.json을 링크합니다. Apple Touch와 favicon은 HTML head에, PWA 아이콘은 manifest에서 참조됩니다.
- 배경과 패딩 옵션은 왜 있나요?
- 투명 로고는 브라우저 탭에서는 괜찮지만 Android나 iOS가 뒤에 둥근 사각형을 깔면 어색하게 보일 수 있습니다. 단색 배경에 8-12% 패딩을 더하면 어떤 런처에서도 타일이 일관되게 렌더링됩니다.