🎨 파비콘 생성기
템플릿 또는 이미지로 SEO 최적화된 파비콘 세트를 생성하세요
사이트 정보 설정
이 정보는 site.webmanifest와 browserconfig.xml 파일에 사용됩니다.
현재 색상: #3B82F6
현재 색상: #FFFFFF
템플릿 선택
32×32
48×48
96×96
192×192
파비콘은 뭐죠?
• 파비콘(Favicon)은 웹사이트를 나타내는 작은 아이콘입니다. 브라우저 탭, 북마크, 주소창 등에 표시되어 사용자가 웹사이트를 쉽게 식별할 수 있게 도와줍니다.
• SEO에 중요한 이유: 파비콘은 검색 엔진이 웹사이트를 인식하고 브랜딩하는 데 도움이 됩니다. 또한 사용자 경험을 향상시켜 북마크나 홈 화면에 추가할 때 더욱 전문적으로 보이게 만듭니다.
• 필요한 크기: 다양한 디바이스와 브라우저를 지원하기 위해 16×16, 32×32, 48×48, 96×96, 180×180, 192×192, 256×256, 512×512 등 여러 크기의 파비콘이 필요합니다.
• 사이트 정보 설정의 역할: 상단의 “사이트 정보 설정”에서 입력한 정보는 site.webmanifest와 browserconfig.xml 파일에 사용됩니다. 이 파일들은 PWA(Progressive Web App) 기능과 Windows 타일 설정에 필요하며, 모바일 기기에서 홈 화면에 추가할 때 앱 이름과 테마 색상을 결정합니다.
• 템플릿 기능: 알파벳, 숫자, 한글, 이모지를 선택하고 색상을 조정하여 간단한 텍스트 기반 파비콘을 빠르게 생성할 수 있습니다.
• 이미지 업로드: PNG, JPEG, SVG 등 이미지 파일을 업로드하면 자동으로 다양한 크기로 리사이즈하여 완전한 파비콘 세트를 생성합니다.
• 다운로드 옵션: 개별 파일을 다운로드하거나, 모든 파일을 ZIP으로 묶어서 한 번에 다운로드할 수 있습니다. ZIP 파일에는 파비콘 파일뿐만 아니라 site.webmanifest, browserconfig.xml, HTML 코드 스니펫도 포함되어 있습니다.
사용법 안내
• 템플릿 사용: 템플릿 탭에서 알파벳이나 숫자를 선택하고, 색상을 조정한 후 “파비콘 생성” 버튼을 클릭하세요.
• 이미지 업로드: 이미지 업로드 탭에서 이미지 파일을 드래그 앤 드롭하거나 파일 선택 버튼을 클릭하여 업로드하세요.
• 사이트 정보 설정: 페이지 상단의 “사이트 정보 설정” 섹션에서 사이트 이름, 짧은 이름, 테마 색상, 배경 색상을 설정하세요. 이 정보는 site.webmanifest와 browserconfig.xml 파일에 사용됩니다.
- 사이트 이름: 전체 사이트 이름을 입력하세요.
- 짧은 이름 (12자 이내 권장): PWA(Progressive Web App) manifest의 short_name 필드에 사용되며, 모바일 홈 화면에 추가될 때 앱 이름으로 표시됩니다. 모바일 홈 화면은 공간이 제한적이라 긴 이름이 잘릴 수 있으므로 짧은 이름을 권장합니다.
- 테마 색상/배경 색상: PWA 기능과 모바일 홈 화면 추가 시 앱의 테마 색상을 결정합니다.
• 다운로드: 생성된 파비콘을 개별적으로 다운로드하거나, “전체 다운로드 (ZIP)” 버튼을 클릭하여 모든 파일을 한 번에 다운로드하세요.
• HTML 코드: “HTML 코드 복사” 버튼을 클릭하여 생성된 HTML 코드를 복사하고, 웹사이트의 <head> 태그에 붙여넣으세요.