파비콘 생성기
하나의 이미지로 모든 표준 파비콘 크기를 생성합니다. 웹사이트, 웹 앱, 브라우저용 파비콘 제작
웹, 모바일 앱 등에 적합한 가장 호환성이 좋은 포맷
브라우저 전용 파비콘 파일 (모든 크기 포함)
크기 조정이 자유로운 벡터 포맷 (최신 브라우저)
사용 방법
1. 이미지 업로드
'이미지 선택'을 클릭하고 로고나 아이콘을 선택하세요. 정사각형 이미지(1:1 비율)가 가장 적합합니다. 권장 최소 크기: 512x512 픽셀.
2. 파비콘 생성
'파비콘 생성'을 클릭하면 모든 표준 크기(16x16~512x512)가 생성됩니다. 도구가 자동으로 각 크기로 이미지를 조정합니다.
3. 미리보기 및 다운로드
생성된 모든 크기를 미리보고 개별 파일을 다운로드하거나 '전체 다운로드 (ZIP)'를 클릭하여 한 번에 모두 받으세요.
4. 웹사이트에 적용
ZIP 파일의 압축을 풀고 모든 파비콘 파일을 웹사이트 루트 디렉토리에 업로드하세요. 제공된 HTML 코드를 페이지의 <head> 섹션에 추가하세요.
HTML 코드 예제
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">로고나 아이콘의 정사각형 이미지(1:1 비율)를 준비하세요. 최상의 결과를 위해 최소 512x512 픽셀의 PNG 또는 JPG 파일을 사용하세요. 더 큰 원본 이미지는 축소할 때 더 나은 품질을 생성합니다.
'이미지 선택' 버튼을 클릭하여 기기의 파일 선택기를 엽니다. 준비된 로고 이미지를 찾아 선택하세요. 도구는 PNG, JPG, JPEG, WebP, GIF를 포함한 모든 표준 이미지 형식을 허용합니다.
미리보기를 검토하여 이미지가 올바른지 확인하세요. 다른 이미지를 사용해야 하는 경우 '초기화' 버튼을 클릭하여 현재 선택을 지우고 다시 시작하세요.
'파비콘 생성' 버튼을 클릭하여 모든 8개의 표준 파비콘 크기를 생성하세요. 도구는 백그라운드에서 이미지를 처리하여 16x16, 32x32, 48x48, 64x64, 128x128, 180x180, 192x192, 512x512 픽셀로 조정합니다.
미리보기 그리드에서 생성된 파비콘을 검토하세요. 각 파비콘은 실제 크기, 파일 이름 및 사용 위치(브라우저 탭, iOS 홈 화면, Android 등)에 대한 설명과 함께 표시됩니다.
각 미리보기 아래의 '다운로드' 버튼을 클릭하여 개별 파비콘 크기를 다운로드하세요. 특정 크기만 필요하거나 개별 파일을 검사하려는 경우 유용합니다.
완전한 구현을 위해 '전체 다운로드 (ZIP)'를 클릭하여 포괄적인 패키지를 다운로드하세요. ZIP 파일에는 모든 8개의 파비콘 PNG 파일, Progressive Web App용으로 구성된 manifest.json 파일, 웹사이트의 <head> 섹션용 즉시 사용 가능한 코드가 포함된 HTML 스니펫 파일이 포함되어 있습니다.
다운로드한 ZIP 파일의 압축을 컴퓨터에 풀으세요. 모든 PNG 파일과 manifest.json을 웹사이트의 루트 디렉토리(index.html 또는 홈페이지가 포함된 폴더)에 업로드하세요.
favicon-instructions.html 파일을 열어 HTML 코드 스니펫을 확인하세요. <link> 태그를 복사하여 웹사이트 HTML의 <head> 섹션에 닫는 </head> 태그 앞에 붙여넣으세요.
다양한 브라우저와 기기에서 웹사이트를 방문하여 파비콘을 테스트하세요. 브라우저 탭, 북마크, 모바일 홈 화면 아이콘을 확인하세요. 새 파비콘이 즉시 표시되지 않으면 브라우저 캐시를 지우세요.
프로 팁
- 최상의 결과를 위해 정사각형 이미지(1:1 비율)를 사용하세요. 직사각형 이미지는 중앙에 배치되며 작은 크기에서 최적으로 보이지 않을 수 있습니다.
- 큰 고해상도 원본 이미지로 시작하세요(최소 512x512, 가능하면 1024x1024 이상). 도구는 원본에서 축소하므로 더 높은 품질의 입력이 더 선명한 파비콘을 생성합니다.
- 디자인을 단순하고 대담하게 유지하세요. 복잡한 세부 사항과 얇은 선은 16x16 또는 32x32 크기에서 보이지 않게 됩니다.
- 로고 주위에 약간의 여백을 남기세요. 디자인이 가장자리까지 확장되면 더 작은 크기에서 좁아 보이거나 잘릴 수 있습니다.
- 높은 대비 색상을 사용하세요. 미묘한 색상 차이는 파비콘 크기에서 사라집니다. 대담하고 대조적인 색상은 16x16 픽셀에서도 아이콘을 인식할 수 있게 합니다.
- 밝은 배경과 어두운 배경 모두에서 테스트하세요. 브라우저 테마는 다양합니다 - 일부 사용자는 다크 모드를 활성화했습니다.
- 투명한 배경의 경우 원본 이미지에 PNG 형식을 사용하세요. 도구는 투명도를 유지하며, 이는 파비콘을 다양한 브라우저 테마와 혼합하려는 경우 유용합니다.
- 기존 파비콘을 변경하는 경우 브라우저가 파비콘을 적극적으로 캐시한다는 점에 유의하세요. 사용자는 새 아이콘을 즉시 보려면 캐시를 지우거나 강력 새로고침(Ctrl+F5)을 사용해야 할 수 있습니다.
이 도구를 사용하는 이유
파비콘 생성기는 모든 웹사이트 소유자와 개발자에게 지루하지만 필수적인 작업을 간소화합니다. 이미지 편집 소프트웨어에서 8개의 다른 파비콘 크기를 수동으로 만드는 데 30-60분을 소비하는 대신 - 각 캔버스를 설정하고, 로고를 확대/축소하고, 위치를 조정하고, 각 크기를 개별적으로 내보내는 대신 - 이 도구로 2분 이내에 전체 작업을 완료합니다. 이 극적인 시간 절약은 프로젝트 전체에 곱해집니다. 여러 클라이언트 사이트에서 작업하는 웹 개발자는 단일 사이트에 대한 파비콘을 수동으로 만드는 데 걸리는 시간에 모든 프로젝트에 대한 완전한 파비콘 패키지를 생성할 수 있습니다. 시간 효율성을 넘어, 도구는 작은 크기에서도 선명도와 명확성을 유지하는 적절한 이미지 확장 알고리즘을 사용하여 모든 크기에서 일관성과 품질을 보장합니다.