사용법
- 로고 이미지(PNG 권장, 투명 배경 가능)를 드래그 앤 드롭하거나 클릭해 업로드합니다.
- 앱 이름과 테마 색상(HEX 코드)을 입력하고, 배경 투명 여부를 선택합니다.
- "파비콘 패키지 다운로드" 버튼을 클릭하면 ZIP 파일이 생성됩니다.
- ZIP을 풀면 favicon.ico, 각 크기 PNG, apple-touch-icon.png, site.webmanifest가 포함되어 있습니다.
- 파일을 웹 서버 루트에 올리고 페이지 <head>에 제공된 link 태그를 추가하면 완료됩니다.
활용 팁
- 정사각형 이미지 준비: 원본이 직사각형이라면 미리 크롭해 정사각형 비율로 만든 뒤 업로드하세요. 비율이 맞지 않으면 중앙 크롭 처리되어 원하는 부분이 잘릴 수 있습니다.
- iOS 홈 화면 아이콘: apple-touch-icon.png(180×180px)가 없으면 iOS Safari에서 홈 화면에 추가할 때 아이콘이 뭉개집니다. 이 도구는 해당 파일도 자동 생성합니다.
- PWA 설치 아이콘: site.webmanifest의 192×192와 512×512 PNG는 Android Chrome의 "홈 화면에 추가"와 PWA 설치에 사용됩니다. 앱 이름과 테마 색상을 정확히 입력해 두세요.
자주 묻는 질문
Q. favicon.ico 파일 하나만 있으면 안 되나요?
favicon.ico만으로도 브라우저 탭에는 표시되지만, 모바일 홈 화면·PWA·소셜 미리보기에서 고화질 아이콘이 필요하려면 PNG 파일들도 있어야 합니다. 이 도구는 필요한 파일을 모두 한 번에 생성합니다.
Q. 원본 이미지를 어떤 크기로 준비해야 하나요?
최소 512×512px 이상의 정사각형 PNG를 권장합니다. 이 도구가 각 크기로 리사이즈하므로 원본이 크면 클수록 품질이 좋습니다.
Q. 투명 배경 PNG를 올리면 favicon.ico도 투명 배경이 되나요?
"투명 배경 유지" 옵션이 켜져 있으면 PNG 파일은 투명하게, ICO 파일은 투명 채널을 포함해 생성됩니다. 브라우저가 ICO 내 투명도를 지원하면 배경색 없이 표시됩니다.