PixelVault의 파비콘 생성기는 아무것도 업로드하지 않고 어떤 이미지든 완전한 웹사이트·앱 아이콘 세트로 만들어 줍니다. 대부분의 "파비콘 생성기" 사이트는 아이콘 하나를 받기도 전에 로고를 자기 서버로 보내라고 요구합니다. 여기서는 여러 해상도의 favicon.ico, PNG 아이콘, 매니페스트까지 모든 파일이 브라우저 안에서 바로 만들어지므로 브랜드 이미지가 기기를 벗어나지 않습니다.
요즘 사이트에는 아이콘 하나로는 부족합니다. 브라우저는 주소창과 탭에 작은 favicon.ico를 읽고, iOS는 홈 화면용으로 180×180 apple-touch-icon을 원하며, 안드로이드와 PWA는 웹 매니페스트에서 참조하는 192, 512px PNG를 사용합니다. PixelVault는 소스 이미지 하나로 이 모두를 한 번에 만들고, 바로 붙여 넣을 수 있는 HTML 스니펫까지 건네주므로 연결하는 데 몇 초면 충분합니다.
아이콘의 모습은 여러분이 정합니다. 단순한 정사각형으로 두거나, 모서리를 둥글리거나, 원형으로 자르세요. 워드마크가 가장자리에 붙지 않도록 안쪽 여백을 더하고, 투명 배경이나 단색 배경을 고르세요. 실시간 미리보기가 실제 파비콘 크기로 결과를 — 가상의 브라우저 탭까지 포함해 — 보여 주므로, 내려받기 전에 방문자가 보게 될 모습을 정확히 알 수 있습니다.
작동 방식
이미지를 추가하면 브라우저가 그것을 메모리로 디코딩하고, PixelVault가 선택한 모양 마스크, 안쪽 여백, 배경을 적용해 각 아이콘 크기의 정사각형 캔버스에 다시 그립니다. 각 캔버스는 브라우저에 내장된 인코더로 PNG로 인코딩되고, 16, 32, 48px PNG는 하나의 favicon.ico(널리 지원되는 PNG-in-ICO 컨테이너)로 묶입니다. SVG 로고는 먼저 고해상도로 로컬에서 래스터화되므로 아이콘이 또렷하게 유지됩니다.
로컬 처리가 중요한 이유
아이콘을 로컬에서 생성한다는 것은 여러분의 로고 — 아직 공개되지 않은 브랜딩인 경우가 많죠 — 가 제3자 서비스에 전송되거나 저장되거나 기록되지 않는다는 뜻입니다. 또한 즉각적입니다. 업로드도, 대기열도, 내려받기 왕복도 없으며, 페이지가 한 번 열린 뒤에는 오프라인에서도 계속 작동합니다. 내려받는 것은 브라우저가 만든 그대로이며 덧붙여진 것이 없습니다.
지원 형식
- ICO — 탭과 주소창을 위한 여러 해상도의 favicon.ico(16/32/48px).
- PNG — Apple-touch-icon(180px)과 안드로이드/PWA 아이콘(192 및 512px).
- SVG — 입력 전용 — 벡터 로고를 로컬에서 래스터화해 가장 또렷한 아이콘을 만듭니다.
- JPG / WebP — PNG와 함께 소스 이미지로 사용 가능.
일반적인 사용 사례
- 새 웹사이트나 랜딩 페이지용 favicon.ico와 앱 아이콘을 만드세요.
- PNG나 SVG 로고를 여러 크기를 담은 제대로 된 ICO 파일로 변환하세요.
- PWA용 apple-touch-icon과 웹 매니페스트 아이콘을 생성하세요.
- 로고를 온라인 서비스에 넘기지 않고 브랜드의 파비콘 세트를 새로 단장하세요.