Favicon 생성기
텍스트·이모지·이미지로 favicon·apple-touch-icon·PWA 아이콘을 16~512px 다중 해상도로 한 번에. 외부 업로드 없이 브라우저에서 처리.
1. 입력
2. 미리보기 (다중 해상도)
3. 다운로드
manifest.json (PWA)
HTML <head> 코드
Favicon 이란?
Favicon (파비콘) 은 브라우저 탭·북마크·주소창에 표시되는 사이트 대표 아이콘입니다. 작지만 사이트의 브랜드 인식과 신뢰도를 크게 좌우하고, 검색결과·홈 화면(PWA)에도 노출됩니다. 이 도구는 글자·이모지·이미지로 필요한 모든 크기를 한 번에 만들어 줍니다.
사용 방법 — 4단계
- 입력 선택 — 글자·이모지를 입력하거나 로고 이미지를 업로드합니다.
- 디자인 조정 — 배경색·글자색·모양(둥근/원형/사각)을 고릅니다.
- 다운로드 — 16~512px PNG 를 필요한 만큼 내려받습니다.
- 코드 적용 — 자동 생성된
<head>코드와 manifest.json 을 사이트에 붙여넣습니다.
어떤 크기가 필요한가
| 크기 | 용도 |
|---|---|
| 16·32px | 브라우저 탭·북마크 (기본 favicon) |
| 48·96px | 고해상도 디스플레이·Windows 타일 |
| 180px | apple-touch-icon (iOS 홈 화면 추가) |
| 192·512px | PWA 앱 아이콘 (Android 홈 화면·설치) |
이런 분들께
- 웹사이트·블로그 운영자 — 탭에 뜨는 기본 지구본 아이콘 대신 브랜드 아이콘
- 개발자 — 새 프로젝트 띄울 때 favicon 세트를 빠르게
- PWA 제작자 — manifest 아이콘(192·512) + 코드 한 번에
- 1인 사업·랜딩페이지 — 로고 이미지 → favicon 즉시 변환
왜 favicon은 크기가 여러 개일까
기기·용도마다 요구하는 아이콘 크기가 다릅니다. 한 장만 넣으면 어딘가에서 흐릿하게 나오므로, 본 도구는 표준 크기를 한 번에 만들어 줍니다.
px 단위 — 작을수록 탭·주소창, 클수록 홈 화면·PWA 설치 아이콘 (용도 비교용, 실제 화면 비율 아님)
크기별 용도는 위 "어떤 크기가 필요한가" 표에 정리돼 있습니다. 최신 브라우저는 32×32 PNG로도 충분히 선명하며, .ico는 구형 호환용입니다. 본 도구는 이 크기들을 자동 생성하고 <head>에 붙여넣을 링크 태그와 manifest.json 항목까지 함께 만들어 주므로, 텍스트·이모지·이미지 어느 것으로 시작하든 동일한 세트를 얻습니다.
디자인 팁 — favicon은 정사각형으로 잘리므로, 가로세로 비율이 다른 로고는 미리 정사각 영역에 맞춰 다듬으면 깔끔합니다. 16px 같은 작은 크기에서도 알아볼 수 있게 여러 글자보다 상징이나 이니셜 한 글자가 선명하고, 배경은 투명(PNG) 또는 단색이 또렷합니다. 복잡한 그림은 작게 줄면 뭉개지기 쉽습니다. 미리보기에서 16·32·180·512 크기를 동시에 확인할 수 있으니, 가장 작은 크기에서 또렷한지 보고 다듬는 것을 권장합니다.
개인정보·보안
- 외부 업로드 없음 — 업로드 이미지·생성 아이콘 모두 브라우저 canvas 에서만 처리.
- 서버 저장 없음 — 운영자도 내용을 볼 수 없습니다.
관련 도구
자주 묻는 질문
favicon 이 외부로 업로드되나요?
어떤 크기를 만들어야 하나요?
favicon.ico 파일도 필요한가요?
HTML 에 어떻게 적용하나요?
<head> 코드를 복사해 사이트 <head> 에 붙여넣고, PNG 파일들을 사이트 루트에 업로드. PWA 면 manifest.json 도 적용.