미리보기
16x16
32x32
48x48
64x64
ICO 다운로드
HTML 코드
파비콘 크기별 용도 가이드
Favicon Generator는 웹사이트의 파비콘을 쉽고 빠르게 만들 수 있는 도구입니다.
1️⃣ 텍스트 입력
• 1-2자의 영문자, 숫자, 이모지를 입력하세요
• 브랜드 이니셜이나 로고 문자를 사용하면 좋습니다
• 예: "A", "AB", "⭐", "🎨"
2️⃣ 색상 선택
• 배경색: 브랜드 색상을 선택하세요
• 텍스트 색상: 배경과 대비가 잘 되는 색을 선택하세요
• 색상 팔레트에서 빠르게 선택하거나 직접 HEX 코드를 입력할 수 있습니다
3️⃣ 폰트 선택
• Arial, Helvetica, Impact 등 다양한 폰트를 지원합니다
• 가독성이 좋은 굵은 폰트를 권장합니다
4️⃣ 모양 선택
• Square: 정사각형 (클래식한 스타일)
• Rounded: 둥근 모서리 (모던한 스타일)
• Circle: 원형 (부드러운 스타일)
5️⃣ 미리보기 및 다운로드
• 16x16, 32x32, 48x48, 64x64 크기로 실시간 미리보기
• 각 크기별로 PNG 파일 다운로드 가능
• ICO 형식으로 한 번에 다운로드 가능
6️⃣ HTML 코드 생성
• 복사 버튼을 클릭하여 HTML link 태그를 복사하세요
• 웹사이트의 <head> 태그 안에 붙여넣으면 됩니다
파비콘(Favicon)은 "favorites icon"의 줄임말로, 웹사이트를 나타내는 작은 아이콘입니다.
📖 파비콘의 역사
파비콘은 1999년 Internet Explorer 5에서 처음 도입되었습니다. 당시 Microsoft는 사용자가 웹사이트를 즐겨찾기에 추가할 때 표시할 아이콘을 원했고, 웹사이트 루트 디렉토리의 "favicon.ico" 파일을 찾아 표시하도록 했습니다.
초기에는 16x16 픽셀의 ICO 형식만 지원했지만, 시간이 지나면서 PNG, SVG 등 다양한 형식과 여러 크기를 지원하게 되었습니다. 오늘날 파비콘은 브라우저 탭뿐만 아니라 북마크, 홈 화면 아이콘, 검색 결과 등 다양한 곳에서 사용됩니다.
🎯 파비콘의 용도
• 브라우저 탭: 여러 탭을 열었을 때 웹사이트를 빠르게 식별
• 북마크/즐겨찾기: 저장된 사이트를 시각적으로 구분
• 모바일 홈 화면: 앱 아이콘처럼 표시
• 검색 결과: Google 등의 검색 결과에서 브랜드 표시
• 브라우저 히스토리: 방문 기록에서 사이트 식별
📐 권장 크기
• 16x16px: 기본 브라우저 탭 크기
• 32x32px: 고해상도 디스플레이용
• 48x48px: Windows 작업 표시줄
• 64x64px: 고품질 디스플레이
• 180x180px: Apple Touch Icon (iOS)
• 192x192px: Android Chrome
🎨 디자인 팁
1. 단순하게: 작은 크기에서도 명확하게 보여야 합니다
2. 대비: 배경과 전경의 색상 대비를 명확히
3. 브랜드 일관성: 로고나 브랜드 색상 사용
4. 테스트: 다양한 배경(밝은/어두운)에서 테스트
5. 확장성: 다양한 크기에서 잘 보이는지 확인
💾 파일 형식
• ICO: 전통적인 형식, 여러 크기 포함 가능
• PNG: 투명 배경 지원, 가장 널리 사용
• SVG: 벡터 형식, 모든 크기에서 선명
• GIF: 애니메이션 가능 (권장하지 않음)
🔧 구현 방법
HTML <head> 태그에 다음 코드를 추가:
<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="shortcut icon" href="/favicon.ico">
⚡ 성능 최적화
• 파일 크기 최소화 (일반적으로 1KB 미만)
• CDN 사용으로 빠른 로딩
• 브라우저 캐싱 활용
• 필요한 크기만 제공
💡 파비콘 제작 가이드
1. 브랜드 아이덴티티 강화
• 회사 로고의 첫 글자나 이니셜 사용
• 브랜드 대표 색상을 배경색으로 설정
• 일관된 디자인으로 브랜드 인지도 향상
2. 가독성 최우선
• 16x16 크기에서도 명확하게 보이는 디자인
• 복잡한 디테일보다는 단순한 형태 선택
• 고대비 색상 조합 사용 (예: 흰색 텍스트에 어두운 배경)
3. 다크모드 고려
• 밝은 배경과 어두운 배경 모두에서 테스트
• 필요시 두 가지 버전 제작 (밝은/어두운)
• 테두리 추가로 어떤 배경에서도 구분 가능하게
4. 이모지 활용
• 유니코드 이모지를 텍스트로 사용 가능
• 브랜드와 관련된 이모지 선택 (예: 🎨 디자인, 💻 개발)
• 모든 브라우저에서 일관되게 표시되지 않을 수 있음 주의
5. A/B 테스팅
• 여러 디자인을 만들어 비교
• 동료나 사용자에게 피드백 요청
• 다양한 디바이스와 브라우저에서 확인
6. 파일 최적화
• PNG는 256색 이하로 저장하여 용량 절약
• 투명 배경은 필요할 때만 사용
• 작은 파일 크기로 로딩 속도 개선
7. 여러 플랫폼 대응
• 웹: 16x16, 32x32 PNG 제공
• iOS: 180x180 Apple Touch Icon
• Android: 192x192 PNG
• Windows: 70x70, 150x150, 310x310 타일
8. SEO 최적화
• 파비콘이 있으면 검색 결과에서 더 전문적으로 보임
• 브랜드 인지도 향상에 도움
• 클릭율(CTR) 개선 효과
9. 버전 관리
• 파일명에 버전 번호 추가 (favicon-v2.ico)
• 캐시 문제 방지를 위해 쿼리 스트링 사용
• 예: <link rel="icon" href="/favicon.ico?v=2">
10. 접근성 고려
• 색맹 사용자를 위한 색상 대비 확인
• 문화적으로 적절한 색상과 심볼 선택
• WCAG 대비 비율 가이드라인 준수 (최소 4.5:1)