브라우저 기반 파비콘 생성 방식
전체 생성 파이프라인이 Canvas API와 fflate 압축 라이브러리를 사용하여 브라우저 탭 내에서 실행됩니다. 서버 측 처리, 업로드, 타사 서비스가 필요하지 않습니다.
- 소스 이미지를 로드하거나 오프스크린 캔버스에 텍스트나 이모지를 고해상도로 렌더링합니다. 이미지를 선택한 경우 브라우저가 기본적으로 디코딩합니다. 텍스트 모드를 선택한 경우 페이지가 선택한 폰트, 전경색 및 배경색으로 단어를 캔버스에 그립니다.
- 각 대상 크기(16, 32, 48, 180, 192, 512픽셀)에 대해 페이지가 정확한 치수의 새 오프스크린 캔버스를 만든 다음 Canvas API를 사용하여 소스 콘텐츠를 그립니다. 브라우저의 내장 이미지 리사이징이 바이리니어 또는 바이큐빅 필터링으로 자동 다운스케일을 처리하여 모든 크기에서 선명한 파비콘을 생성합니다.
- 각 캔버스는
canvas.toBlob()을 통해 PNG Blob으로 내보내집니다. 미리보기 패널에는 6가지 크기가 모두 표시되어 다운로드 전에 결과를 확인할 수 있습니다. 파일 이름에서 바로 사용 가능한 HTML 블록과 웹 앱 manifest 스니펫(manifest.json)이 빌드되어 사이트 head 태그에 바로 넣을 수 있습니다. - ZIP 다운로드를 클릭하면 페이지가 모든 PNG Blob을 메모리로 읽어들이고, fflate를 사용하여
manifest.json과 함께 단일 ZIP 아카이브로 패키징한 후 원클릭으로 다운로드를 시작합니다. 전체 번들이 브라우저에서 빌드되며, 어떤 단계에서도 업로드되지 않습니다.
브라우저에서 파비콘을 생성해야 하는 이유
- 완전한 파비콘 세트는 첫 방문 시 브라우저의 파비콘 없음 404 오류를 제거하고 북마크, 브라우저 탭 및 PWA 설치 화면에서 사이트가 전문적으로 보이도록 합니다. 크기가 누락되면 브라우저가 아무것도 로드하지 않거나 흐릿한 최근접 이웃 스케일로 대체됩니다.
- 번들로 제공되는 HTML과 manifest 스니펫은 6개의 태그와 JSON manifest 블록을 직접 작성하는 수고를 덜어줍니다. 사이트 head에 붙여넣고 필요에 따라 경로를 조정하면 몇 분이 아닌 몇 초 만에 완료됩니다.
- 사진 편집기가 없는 잠긴 기업용 기기에서는 클라이언트 측 생성이 유일한 옵션입니다. 업로드가 없으므로 데이터 유출 위험이 없고 민감하거나 브랜드 이미지에 대한 규정 준수 검토도 필요하지 않습니다.
- 텍스트 및 이모지 모드를 사용하면 이미지 없이도 파비콘을 생성할 수 있습니다. 브랜드 이니셜, 문자 또는 이모지를 입력하고 폰트와 색상을 선택하면 전체 세트를 얻을 수 있습니다 — 개인 프로젝트, 프로토타입 또는 지금 당장 임시 파비콘이 필요한 사이트에 적합합니다.
일반적인 파비콘 생성 활용 사례
사용자가 북마크하거나 설치하는 모든 사이트에는 파비콘이 필요합니다. 브라우저 기반 생성기가 시간을 절약해주는 세 가지 시나리오를 소개합니다.
- 새 랜딩 페이지 또는 마이크로사이트 설정. 브랜드 로고에서 1분 이내에 전체 파비콘 세트를 생성하고 태그를 사이트 head에 복사하여 배포. 디자인 도구가 필요하지 않습니다.
- 프로그레시브 웹 앱용 PWA 아이콘 제작. manifest.json에는 192×192 및 512×512 PNG 아이콘이 필요합니다. 다른 파비콘 세트와 함께 한 번에 생성하고 로고를 수동으로 리사이즈할 필요가 없습니다.
- 프로토타입 및 스테이징 사이트용 플레이스홀더 생성. 단일 문자나 이모지를 입력하고 배경색을 선택하면 디자인 팀의 최종 브랜드 에셋을 기다리지 않고 실제와 같은 파비콘을 얻을 수 있습니다.
실제 예시: 회사 로고에서 파비콘 세트 생성
500×500 PNG 로고가 있고 새 마케팅 사이트를 위한 전체 파비콘 세트가 필요합니다.
이 페이지를 열고 로고 PNG를 업로드 영역에 드롭하세요. 이미지가 로드되고 크기 그리드와 함께 미리보기가 나타납니다.파비콘 생성을 클릭하세요. 페이지가 16, 32, 48, 180, 192, 512픽셀의 6개 오프스크린 캔버스에 로고를 그리고 각 결과를 표시합니다. 미리보기 패널 아래에는 16/32/48 크기의 rel="icon" 항목, 180 크기의 apple-touch-icon 링크, PWA 아이콘용 manifest 링크가 포함된 바로 사용 가능한 HTML 블록이 나타납니다. 아래의 manifest 스니펫에는 192 및 512 아이콘이 나열됩니다.ZIP 다운로드를 클릭하면 fflate를 통해 6개의 PNG와 manifest.json이 단일 ZIP 아카이브로 패키징됩니다. 전체 과정은 2초가 걸리며 초기 페이지 로드 외에는 대역폭을 소비하지 않습니다.
이 도구는 어떤 파비콘 크기를 생성하나요?
6가지 크기: 표준 브라우저 파비콘용 16×16, 32×32, 48×48, Apple Touch Icon용 180×180, PWA manifest 아이콘용 192×192 및 512×512. 모든 크기가 PNG로 출력됩니다. 최신 브라우저는 를 통해 PNG 파비콘을 허용합니다.
텍스트나 이모지로 파비콘을 생성할 수 있나요?
네. 텍스트 또는 이모지 모드로 전환하고, 단어를 입력하거나 이모지를 붙여넣고, 폰트, 전경색 및 배경색을 선택한 후 생성을 클릭하세요. 텍스트가 고해상도로 오프스크린 캔버스에 렌더링된 다음 각 대상 파비콘 크기로 리사이즈됩니다.
이미지가 서버에 업로드되나요?
아니요. 이미지가 기기를 떠나지 않습니다. 페이지는 브라우저의 File API를 사용하여 이미지를 메모리로 읽어들이고 Canvas API를 사용하여 각 파비콘을 리사이즈 및 내보냅니다. 생성 중 DevTools 네트워크 패널을 열면 나가는 요청은 초기 페이지 로드와 광고 호출뿐입니다. 이미지 데이터가 전송되지 않습니다.
이미지 업로드에 어떤 형식이 허용되나요?
브라우저가 디코딩할 수 있는 모든 형식: PNG, JPEG, WebP, GIF 및 SVG(브라우저에서 래스터화). 파일 크기 제한은 업로드당 10 MB입니다.
ZIP 다운로드는 어떻게 작동하나요?
페이지는 fflate 라이브러리(공유 vendor 경로에서 필요 시 로드)를 사용하여 생성된 모든 PNG와 manifest.json을 표준 ZIP 아카이브로 패키징합니다. 패키징은 전적으로 브라우저 메모리에서 이루어지며, 업로드나 서버 왕복이 없습니다. ZIP은 Blob 다운로드로 원클릭 제공됩니다.
이 파비콘을 모든 웹사이트에서 사용할 수 있나요?
네. 생성된 PNG 파비콘은 태그를 지원하는 모든 최신 브라우저에서 작동합니다. 180×180 Apple Touch Icon은 iOS와 Safari를 지원합니다. 192×192 및 512×512 PWA 아이콘은 Android Chrome 및 기타 PWA 지원 브라우저의 manifest 요구 사항을 충족합니다.
진정한 .ico 형식 옵션이 있나요?
현재 버전은 PNG를 출력합니다. 모든 최신 브라우저가 를 통해 PNG를 허용하기 때문입니다. 진정한 다중 해상도 .ico 형식은 아직 지원되지 않으며 향후 릴리스에서 추가될 수 있습니다.