Favicon 생성기

텍스트·이모지·이미지로 favicon·apple-touch-icon·PWA 아이콘을 16~512px 다중 해상도로 한 번에. 외부 업로드 없이 브라우저에서 처리.

🔒 업로드한 이미지는 외부로 전송되지 않습니다. 모든 처리는 브라우저 canvas 에서만.

1. 입력

2. 미리보기 (다중 해상도)

3. 다운로드

manifest.json (PWA)

HTML <head> 코드

Favicon 이란?

Favicon (파비콘) 은 브라우저 탭·북마크·주소창에 표시되는 사이트 대표 아이콘입니다. 작지만 사이트의 브랜드 인식과 신뢰도를 크게 좌우하고, 검색결과·홈 화면(PWA)에도 노출됩니다. 이 도구는 글자·이모지·이미지로 필요한 모든 크기를 한 번에 만들어 줍니다.

사용 방법 — 4단계

  1. 입력 선택 — 글자·이모지를 입력하거나 로고 이미지를 업로드합니다.
  2. 디자인 조정 — 배경색·글자색·모양(둥근/원형/사각)을 고릅니다.
  3. 다운로드 — 16~512px PNG 를 필요한 만큼 내려받습니다.
  4. 코드 적용 — 자동 생성된 <head> 코드와 manifest.json 을 사이트에 붙여넣습니다.

어떤 크기가 필요한가

크기용도
16·32px브라우저 탭·북마크 (기본 favicon)
48·96px고해상도 디스플레이·Windows 타일
180pxapple-touch-icon (iOS 홈 화면 추가)
192·512pxPWA 앱 아이콘 (Android 홈 화면·설치)

이런 분들께

개인정보·보안

관련 도구

자주 묻는 질문

favicon 이 외부로 업로드되나요?
전송되지 않습니다. 모든 처리는 브라우저 canvas에서만 이뤄지며, 업로드한 이미지도 외부로 나가지 않습니다.
어떤 크기를 만들어야 하나요?
기본 16·32px, 고해상도 48·96px, iOS용 apple-touch-icon 180px, PWA용 192·512px. 이 도구가 7개를 한 번에 생성합니다.
favicon.ico 파일도 필요한가요?
모던 브라우저는 PNG favicon 을 지원하므로 favicon-32.png·16.png 로 충분합니다. 구형 IE 호환이 꼭 필요하면 별도 .ico 변환 도구를 쓰세요.
HTML 에 어떻게 적용하나요?
생성된 <head> 코드를 복사해 사이트 <head> 에 붙여넣고, PNG 파일들을 사이트 루트에 업로드. PWA 면 manifest.json 도 적용.

참고

최종 검증: 2026-06-11 / HTML Canvas API 기반, 외부 라이브러리 없음.
  • Web App Manifest — MDN
  • favicon 가이드 — MDN