무료 변환기

파비콘 발전기

모든 이미지에서 다양한 크기(16x16~512x512)의 파비콘 파일을 생성합니다. 무료이며 즉시 실행되며 브라우저에서 완전히 실행됩니다.

여기에 이미지를 드래그 앤 드롭하세요.

PNG, JPG, SVG, WebP를 지원합니다. 최대 10MB.

또는

이 도구에 대하여

파비콘은 브라우저 탭, 북마크, 기록 목록에 표시되는 작은 아이콘입니다. /favicon.ico의 16×16 ICO 파일인 원본 파비콘은 브라우저 탭의 경우 16×16 및 32×32, iOS 홈 화면의 경우 180×180, Android의 경우 192×192 및 512×512, Windows 타일의 경우 다양한 크기 등 다양한 플랫폼에 대해 다양한 크기의 복잡한 아이콘 세트로 확장되었습니다. 단일 소스 이미지에서 이러한 모든 것을 생성하는 것이 최신 파비콘 생성기의 기능입니다.

이 도구는 단일 고해상도 소스 이미지(일반적으로 정사각형 로고)를 가져와 전체 파비콘 자산 세트와 이를 참조하는 데 필요한 HTML 링크 태그를 생성합니다. 출력에는 ICO, 여러 PNG 및 프로그레시브 웹 앱 메타데이터용 매니페스트.json이 포함됩니다. 결과 파일을 사이트 루트에 놓고 생성된 HTML을 통해 참조하세요.

모든 처리는 귀하의 브라우저에서 이루어집니다. 업로드, API 호출, 속도 제한이 없습니다. 출력은 파비콘을 표시하는 모든 최신 브라우저 및 운영 체제에서 작동합니다.

파비콘을 생성하는 이유

파비콘이 없는 사이트는 미완성된 것처럼 보입니다. 브라우저 탭에는 일반 아이콘이 표시됩니다. 북마크에는 시각적 식별자가 없습니다. 사이트가 덜 전문적인 것 같습니다. 적절한 파비콘 세트를 추가하는 것은 세부 사항에 주의를 기울이는 노력이 적고 효과가 뛰어난 마무리 단계입니다.

최신 파비콘 요구 사항은 /favicon.ico 이상으로 늘어났습니다. iOS 홈 화면 아이콘, Android Chrome 아이콘, Windows 타일 아이콘 및 다크 모드 변형은 모두 서로 다른 파일을 사용합니다. 하나의 소스에서 모든 파일을 생성하면 각 파일을 직접 관리하지 않고도 일관된 브랜딩이 보장됩니다.

사용 방법

소스 이미지를 업로드하고 전체 파비콘 세트를 받으세요.

  1. 소스 이미지 업로드: 최소 512×512픽셀의 정사각형 이미지를 사용하세요. PNG가 선호됩니다(투명도 지원). SVG도 허용됩니다. 고해상도 소스는 더 선명하고 작은 아이콘을 생성합니다.
  2. 플랫폼 옵션 구성: 필요에 따라 iOS, Android, Windows 및 PWA 출력을 활성화합니다. 기본 설정은 대부분의 사이트에 필요한 표준 세트를 생성합니다.
  3. 색상 및 테마 맞춤설정: Windows 타일 및 PWA 시작 화면의 테마 색상을 선택하세요. 브랜드 아이덴티티와 일치하세요.
  4. 다운로드 및 배포: 생성된 zip을 저장합니다. 사이트 루트에 파일을 배치하고 생성된 HTML 링크 태그를 <head>에 추가하세요. HTML은 각 아이콘을 적절한 크기로 참조합니다.

일반적인 사용 사례

기술적인 세부사항

최신 파비콘 세트: favicon.ico(16+32+48 다중 해상도), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png(180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. 또한 PWA용 site.webmanifest, Windows용 browserconfig.xml도 있습니다.

각 PNG는 소스에서 캔버스 기반 다운샘플링을 통해 생성됩니다. ICO는 DataView 쓰기를 사용하여 16/32/48 버전을 다중 해상도 ICO 형식으로 결합하여 JavaScript로 구성됩니다.

HTML 링크 태그는 적절한 rel 및 size 속성을 사용하여 각 파일을 참조합니다. 생성기는 이를 사이트의 <head>에 대한 복사-붙여넣기 가능 스니펫으로 생성합니다.

모범 사례

자주 묻는 질문

어떤 이미지 형식을 업로드해야 합니까?
배경이 투명한 PNG가 가장 잘 작동합니다. 도구가 품질 손실 없이 축소될 수 있도록 최소 512x512픽셀의 정사각형 이미지를 사용하세요. SVG는 어떤 크기로도 확장 가능하므로 잘 작동합니다.
이것은 어떤 크기를 생성합니까?
16x16(브라우저 탭), 32x32(브라우저 탭 @2x), 48x48(Windows 작업 표시줄), 180x180(Apple Touch 아이콘), 192x192(Android 홈 화면), 512x512(PWA 스플래시 화면). ICO 파일에는 16, 32 및 48px 크기가 포함되어 있습니다.
파비콘 파일은 어디에 넣나요?
favicon.ico를 웹사이트 루트 디렉토리에 넣으세요. 다른 PNG 크기는 공용 폴더나 액세스 가능한 경로에 저장됩니다. 각 파일 위치를 가리키는 <head> 섹션에 HTML 링크 태그를 추가합니다.
내 파비콘이 브라우저에서 업데이트되지 않는 이유는 무엇입니까?
브라우저는 적극적으로 파비콘을 캐시합니다. 브라우저 캐시를 지우고 시크릿 창에서 열어보거나 파비콘 URL에 버전 쿼리 문자열(?v=2)을 추가하여 강제로 새로고침하세요.
내 파비콘이 업데이트되지 않는 이유는 무엇입니까?
브라우저는 때로는 며칠 동안 파비콘을 공격적으로 캐시합니다. 캐시를 지우거나, 아이콘 URL을 직접 열거나, 버전 쿼리 매개변수를 링크 태그에 추가하여 강제로 새로고침하세요.
내 이미지가 서버에 업로드되나요?
아니요. 생성은 브라우저에서 이루어집니다.
SVG 또는 PNG를 사용해야 합니까?
소스용 SVG(해상도 독립적) 생성기는 특정 크기의 PNG를 출력합니다. 최신 브라우저는 링크 rel=icon type=image/svg+xml을 통해 SVG 파비콘도 지원합니다.
site.webmanifest가 무엇인가요?
아이콘, 색상, 기타 메타데이터를 설명하는 프로그레시브 웹 앱용 JSON 매니페스트입니다. 설치 가능한 웹 앱에 필요합니다. 표준 사이트에도 포함해도 무해합니다.