liminfoFavicon Generator
웹사이트 파비콘 생성
Favicon Generator 소개
파비콘 생성기는 모든 래스터 또는 벡터 이미지를 브라우저 내부에서 바로 파비콘 파일로 변환합니다. PNG, JPG, SVG 원본 이미지(최대 50MB)를 업로드하고 ICO 또는 PNG 출력 형식을 선택한 뒤 생성 버튼을 클릭하면, 브라우저의 Canvas API를 사용해 필요한 모든 크기로 렌더링하고 즉시 다운로드할 수 있도록 준비합니다. ICO 출력 시에는 16, 32, 48, 64, 128, 256픽셀 6개 크기를 하나의 .ico 파일에 담아 제공합니다. PNG 출력 시에는 16×16부터 512×512까지 8개의 개별 파일을 생성합니다.
웹 디자이너와 프런트엔드 개발자는 파비콘을 여러 곳에 활용합니다. 브라우저 탭의 16×16·32×32 아이콘, Windows 작업 표시줄과 북마크용 48·64px 아이콘, iOS 홈 화면의 Apple Touch Icon(180px), 그리고 PWA(Progressive Web App)의 Web App Manifest에 선언하는 192×192·512×512 아이콘이 그것입니다. 이 도구는 이 모든 크기를 한 번에 생성하여 별도의 이미지 편집기에서 수동으로 크기를 조정하는 번거로움을 없애줍니다.
모든 처리는 Canvas API를 사용하여 브라우저 내에서 이루어지기 때문에 원본 이미지는 어떤 서버에도 업로드되지 않습니다. ICO 파일은 ICONDIR/ICONDIRENTRY 이진 형식으로 JavaScript 내에서 직접 조립되며, 각 내장 이미지는 ICO 컨테이너 안에 PNG 스트림으로 저장됩니다. 이 방식은 완전한 프라이버시를 보장하고, 오프라인에서도 작동하며, ImageMagick 등의 서버 측 도구와 동일한 수준의 결과물을 제공합니다.
주요 기능
- ICO 출력: 6가지 크기(16, 32, 48, 64, 128, 256px)를 하나의 .ico 파일로 다운로드
- PNG 출력: 8개 개별 PNG 파일(16, 32, 48, 64, 128, 180, 192, 512px), 파일별 개별 다운로드 가능
- PNG, JPG, GIF, WebP, SVG 등 브라우저가 표시할 수 있는 모든 이미지 형식 지원
- Canvas API 렌더링 — 작은 크기에서도 품질 손실 없이 정확한 픽셀 스케일링
- 브라우저 내 ICO 이진 조립: 올바른 ICONDIR 헤더, ICONDIRENTRY 오프셋, PNG 스트림 내장
- 다운로드 전 모든 생성 크기를 확인할 수 있는 실시간 미리보기 그리드
- 100% 클라이언트 사이드 — 원본 이미지가 기기 밖으로 전송되지 않으며, 서버·계정 불필요
- 다크 모드 지원 및 모바일 친화적인 파일 드롭존(드래그앤드롭 또는 클릭 선택)
자주 묻는 질문
어떤 이미지 형식을 입력으로 사용할 수 있나요?
브라우저가 렌더링할 수 있는 모든 이미지 형식을 사용할 수 있습니다: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, TIFF. 특히 SVG는 해상도 독립적이므로 Canvas API가 모든 파비콘 크기에서 선명하게 래스터화하여 최상의 결과를 제공합니다.
ICO 출력과 PNG 출력의 차이는 무엇인가요?
ICO 출력은 여러 이미지 크기를 하나의 컨테이너에 묶은 단일 .ico 파일을 생성합니다. 이는 모든 브라우저와 운영 체제가 인식하는 전통적인 파비콘 형식입니다. PNG 출력은 크기별 개별 파일을 생성하며, Apple Touch Icon(180px), Web App Manifest 아이콘(192·512px), 기타 플랫폼별 아이콘 선언에 필요합니다.
완전한 파비콘 설정을 위해 어떤 크기가 필요한가요?
완전한 커버리지를 위해 메인 파비콘으로 ICO 파일(16~256px)을 사용하고, HTML에 <link rel="apple-touch-icon">으로 180×180 PNG를 선언하고, Web App Manifest에 192×192 및 512×512 PNG를 등록하세요. 이 도구의 PNG 출력 세트가 이 모든 크기를 포함합니다.
이미지가 서버에 업로드되나요?
아니요. 모든 변환은 Canvas API와 File API를 사용하여 브라우저 내부에서 처리됩니다. 이미지는 FileReader를 통해 로컬에서 읽히고, 화면 밖의 <canvas> 요소에 각 목표 크기로 그려지며, PNG 블롭으로 내보내집니다. 이 모든 과정에서 네트워크 요청은 전혀 발생하지 않습니다.
16×16 파비콘이 흐릿하게 보이는 이유는?
매우 작은 파비콘은 원본 이미지의 세밀한 부분을 16픽셀 안에 표현할 수 없어 흐리게 보일 수 있습니다. 최상의 결과를 위해 단순하고 대비가 뚜렷한 로고나 아이콘, 가능하면 정사각형 SVG를 사용하고 가는 선이나 작은 텍스트는 피하세요.
다운로드한 파비콘을 웹사이트에 어떻게 적용하나요?
다운로드한 favicon.ico를 웹사이트 루트 디렉토리에 배치하고 HTML <head>에 <link rel="icon" href="/favicon.ico">를 추가하세요. PNG 파비콘의 경우 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">를, Apple Touch Icon의 경우 <link rel="apple-touch-icon" href="/favicon-180x180.png">를 추가하세요.
원본 이미지는 어떤 크기를 권장하나요?
최소 512×512픽셀의 정사각형 이미지를 사용하세요. 더 큰 원본 이미지(1024×1024 이상)는 Canvas API가 축소 시 더 많은 세부 정보를 활용할 수 있어 모든 크기에서 일반적으로 더 선명한 결과를 제공합니다. 직사각형 이미지는 정사각형으로 늘어나므로 품질을 위해 미리 정사각형으로 잘라두세요.
PWA(프로그레시브 웹 앱)용 파비콘도 생성할 수 있나요?
네. PNG 출력을 선택하면 192×192 및 512×512 픽셀 파일을 받을 수 있습니다. 이 파일들을 Web App Manifest의 icons 배열에 적절한 purpose 값("maskable any")과 함께 선언하면 Chrome, Firefox, Safari에서 PWA 설치 가능성 요구 사항을 충족합니다.