ZeroTool Workbench

Favicon 생성기

이모지, 텍스트, 이미지, SVG에서 완전한 파비콘 세트를 한 번에 생성. ICO, 멀티 사이즈 PNG, apple-touch-icon, webmanifest 지원. 100% 브라우저 처리.

100% 클라이언트 사이드 데이터가 브라우저 밖으로 나가지 않습니다 무료 · 회원가입 불필요

Or paste any emoji

Live preview 16 / 32 / 64 / 180 px

16 px

32 px

64 px

180 px

왜 여전히 멀티 파일 파비콘 세트가 필요한가

파비콘은 탭 아이콘만이 아닙니다. 검색 결과의 도메인 옆, 브라우저 즐겨찾기, iOS 사용자가 「홈 화면에 추가」할 때의 아이콘, Android의 PWA 설치 카드까지 등장하는 자리마다 요구하는 크기가 다르고 일부는 약간 다른 형식을 요구합니다. favicon.ico 하나만 두면 레티나 스크린과 설치 가능한 PWA에서 거친 가장자리가 그대로 노출됩니다.

이 도구는 현대 표준 세트를 한 번에 생성합니다 — 레거시 호환을 위한 ICO, 현대 <link rel=“icon”> 스택을 위한 멀티 사이즈 PNG, iOS용 apple-touch-icon, 그리고 maskable Android 아이콘을 선언하는 webmanifest입니다.

사용 방법

소스를 선택하세요. 4개 탭은 각각 이모지(프리셋 또는 붙여넣기), 1~4자 타이포그래피, 업로드한 PNG/JPG/SVG 이미지(최대 10 MB), 붙여 넣은 SVG 마크업을 받습니다.
배경과 모양을 설정하세요. 마스크 디자인은 투명, 브랜드 마크는 단색을 권장합니다. 모양은 정사각형, 둥근 모서리(반경 12.5%), 원형 세 가지. Padding 슬라이더가 콘텐츠를 안전 영역 안에 유지합니다.
실시간 미리보기를 확인하세요. 핵심 4 크기 16/32/64/180 px가 동시에 렌더링됩니다. 16과 32 px는 탭 바에서의 가독성을, 180 px는 iOS 홈 화면 아이콘을 가늠하는 잣대입니다.
Generate package를 클릭하세요. 브라우저가 약 1초 안에 11개 파일을 생성합니다. Download ZIP으로 저장하고, Copy HTML snippet으로 <head>에 붙여 넣을 <link> 태그를 복사하세요.

HTML 스니펫 풀이

생성된 스니펫은 약 7줄로 모든 현대 환경을 다룹니다:

<link rel=“icon” type=“image/x-icon” href=“/favicon.ico”> — 오래된 브라우저와 여전히 favicon.ico를 우선 파싱하는 즐겨찾기를 위한 폴백.
<link rel=“icon” type=“image/png” sizes=”…”> 16/32/48 — 현대 브라우저는 sizes가 일치하는 PNG를 우선 선택하고 ICO를 건너뜁니다.
<link rel=“apple-touch-icon”> 180×180 — iOS Safari가 「홈 화면에 추가」 시 사용.
<link rel=“manifest”> — Android Chrome과 PWA 설치기가 site.webmanifest를 읽고, 그 안에서 purpose: “any maskable”로 192/512 PNG를 선언합니다.
<meta name=“theme-color”> — 모바일 주소창과 설치된 PWA의 타이틀 바 색상을 제어합니다.

패키지가 만들어지는 방식

렌더러는 각 타깃 크기마다 새 canvas를 생성하고, 선택한 배경과 모양 마스크를 적용한 뒤, padding 만큼 안쪽에 소스를 중앙 배치로 그립니다. 이어 canvas.toBlob(‘image/png’)로 컴팩트한 PNG 데이터를 받습니다. 16/32/48 PNG 세 개는 PNG 압축 항목 형식으로 단일 favicon.ico에 묶입니다 — ICONDIR 헤더와 16바이트 ICONDIRENTRY 3개 뒤에 3개의 PNG 페이로드를 연결한 구조입니다.

ZIP 라이터는 STORED 방식(DEFLATE 미적용)입니다: PNG는 이미 압축되어 있어 재 DEFLATE 이득이 1% 미만이고 코드는 5 KB가 늘어납니다. 파일 이름은 General Purpose Bit Field의 bit 11에서 UTF-8로 표시되어 향후 이름을 바꿔도 비 ASCII 이름이 깨지지 않습니다.

개인정보와 오프라인

페이지는 파일을 업로드하지 않습니다. 브라우저 네트워크 패널을 열고 Generate를 클릭해 보세요. 어떤 요청도 발생하지 않습니다.
페이지가 캐시되면 오프라인에서도 동작합니다. Canvas API, ZIP, ICO 라이터가 모두 페이지 번들 안에 인라인되어 있습니다.
추적 픽셀 없음. 사용량 집계를 위해 generate와 download 이벤트를 한 번씩 기록하지만 페이로드에는 도구 이름만 담깁니다.

흔한 함정

외부 이미지를 참조하는 SVG. SVG가 <image href=“https://…”>를 포함하면 브라우저가 canvas를 blob으로 읽기를 거부합니다(교차 출처 오염). 붙여 넣기 전에 이미지를 Data URI로 인라인하세요.
기업 관리 Linux에서 빈 이모지 상자. 일부 IT 관리 Linux 배포판에는 컬러 이모지 폰트가 없습니다. 미리보기가 빈 상자로 보이면 Text나 Image 탭으로 전환하세요.
16 px에서 사라지는 미세 디테일. 1.5 px보다 가는 선은 16×16에서 사라집니다. 32에서는 또렷한데 16에서 사라진다면 디자인을 단순화하거나 배경색으로 대비를 보강하세요.

FAQ

패키지에는 어떤 파일이 들어 있나요?

총 11개 파일입니다: favicon.ico (16/32/48 멀티 사이즈, PNG 압축), 독립 PNG 6개 (16/32/48/64/96/128), 180×180 apple-touch-icon.png, 192/512 android-chrome PNG 두 개, 그리고 site.webmanifest. 사이트 루트에 두고 HTML 스니펫을 <head>에 붙여 넣으면 브라우저, iOS, Android, PWA 설치까지 모두 커버됩니다.

파일이 서버로 업로드되나요?

아닙니다. 모든 작업이 브라우저에서 Canvas API를 통해 처리됩니다 — 이미지 디코딩, 멀티 사이즈 리샘플링, ICO/ZIP 패키징 모두 JavaScript가 로컬에서 실행합니다. DevTools → Network 탭을 열고 Generate를 클릭해 보세요. 업로드 요청은 한 건도 없습니다.

왜 macOS와 Windows에서 이모지 모양이 다른가요?

각 운영체제가 자체 컬러 이모지 폰트를 가지고 있기 때문입니다 (macOS는 Apple Color Emoji, Windows는 Segoe UI Emoji, Linux/Android는 Noto Color Emoji). 생성기는 실행 중인 기기의 시스템 폰트를 사용합니다. 플랫폼 전반에서 픽셀 단위로 동일한 출력이 필요하다면 Image 또는 SVG 탭에서 직접 비트맵이나 벡터를 제공하세요.

ICO는 PNG 항목인가요, BMP 항목인가요?

PNG 압축 항목입니다. 각 ICO 프레임은 독립 PNG로, IE 11 이후 모든 브라우저와 Windows Vista 이후 탐색기가 지원합니다. 파일 크기가 작고 알파 투명도를 보존하며, DIB/BMP 인코딩을 피할 수 있습니다. DIB 프레임만 읽을 수 있는 구형 시스템은 의도적으로 범위 밖입니다.

Maskable PWA 아이콘을 생성할 수 있나요?

네. 192와 512 PNG는 매니페스트에서 `purpose: "any maskable"`로 선언되므로 표준 렌더링과 maskable 렌더링을 모두 한 세트로 커버합니다. Padding 슬라이더를 이용해 마크를 안전 영역 안에 배치하세요. Circle 모양을 선택할 때는 최소 10% 패딩을 권장합니다 — Android가 maskable 원형 마스크를 적용할 때 잘리는 경계와 같습니다.

관련 도구