파비콘 생성기
이미지를 업로드하여 다양한 크기의 파비콘을 생성하는 도구입니다.
💡 파비콘이란?
웹사이트의 브라우저 탭이나 북마크에 표시되는 작은 아이콘입니다.
📋 생성되는 크기
- 16x16, 32x32 - 기본 브라우저 파비콘
- 180x180 - Apple Touch Icon (iOS)
- 192x192, 512x512 - Android/PWA
🎨 권장사항
- 정사각형 이미지 사용 (1:1 비율)
- 심플한 디자인 (작게 보일 것을 고려)
- 고대비 색상 (가독성 향상)
- PNG 형식 권장 (투명 배경 가능)
📌 HTML 사용법
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
생성되는 크기
| 크기 | 용도 |
|---|---|
| 16x16 | 기본 브라우저 파비콘 |
| 32x32 | 표준 파비콘 |
| 48x48 | 고화질 브라우저 |
| 64x64 | Windows 타일 |
| 128x128 | iOS 앱 아이콘 |
| 180x180 | Apple Touch Icon |
| 192x192 | Android/Chrome |
| 512x512 | PWA 스플래시 |
HTML 사용법
<!-- 기본 파비콘 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
디자인 권장사항
✅ Good
- 정사각형 이미지
- 심플한 디자인
- 고대비 색상
- PNG 형식 (투명 가능)
❌ Avoid
- 복잡한 디테일
- 긴 텍스트
- 저대비 색상
- 가로로 긴 이미지
활용 팁
💡 팁 1: 원본 이미지
최소 512x512px 이상의 고화질 이미지를 사용하세요.
💡 팁 2: 테스트
여러 브라우저에서 실제로 테스트해보세요.
💡 팁 3: 브랜딩
회사 로고나 브랜드 아이콘을 사용하세요.
파일 구조
생성된 파비콘을 웹사이트 루트에 배치:
/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png
자주 묻는 질문
Q: ICO 파일도 생성되나요?
A: 현재는 PNG만 지원합니다. ICO는 PNG를 변환하여 사용하세요.
Q: 투명 배경이 가능한가요?
A: PNG 파일이므로 투명 배경이 가능합니다.
Q: 모든 크기가 필요한가요?
A: 기본적으로 16x16, 32x32, 180x180만 있어도 충분합니다.