이미지转Favicon工具

JPG、PNG、GIF 등 형식 이미지를 ICO 형식 favicon 아이콘으로 변환하세요

1467 번 사용 | 5.0 평점

Favicon 생성 설정

여기에 이미지를 드래그 앤 드롭하거나

생성 결과

처리되지 않음

Favicon을 보려면 업로드하고 생성하세요

사용 방법

1

이미지 파일 선택

업로드 영역에 이미지 파일을 드래그 앤 드롭하거나 찾기 버튼을 클릭하여 이미지를 선택하세요.

2

Favicon 매개변수 설정

Favicon의 크기와 출력 형식을 선택하고 필요에 따라 이미지 처리 옵션을 조정하세요.

3

Favicon 생성

"Favicon 생성" 버튼을 클릭하면 시스템이 이미지를 Favicon 형식으로 변환합니다.

4

결과 다운로드

생성이 완료되면 다양한 크기의 Favicon을 미리보기하고 생성된 파일을 다운로드할 수 있습니다.

Favicon 기본 지식

Favicon이란 무엇인가요?

Favicon(Favorites Icon)은 브라우저 탭, 즐겨찾기 바 및 기록에 표시되는 웹사이트 아이콘으로 일반적으로 16×16픽셀 또는 32×32픽셀의 작은 이미지입니다. 여러 개의 열린 탭에서 사용자가 웹사이트를 빠르게 식별할 수 있도록 도와주는 웹사이트 브랜드 식별의 중요한 부분입니다.

Favicon 일반 형식

  • .ico 형식: 전통적이고 가장 광범위하게 지원되는 Favicon 형식으로 다양한 크기와 비트 깊이의 이미지를 포함할 수 있습니다
  • .png 형식: 현대 브라우저에서 광범위하게 지원되며 투명 배경과 압축을 지원합니다
  • .svg 형식: 벡터 형식으로 고해상도 화면에서 선명하게 표시되지만 브라우저 지원 수준이 다릅니다
  • .webp 형식: 최신 형식으로 압축 효율이 더 높지만 구형 브라우저는 지원하지 않습니다

권장 크기 및 규격

다양한 기기와 브라우저에서 최상의 표시 효과를 보장하려면 다음 크기를 포함하는 Favicon을 생성하는 것이 좋습니다:

16×16 px
브라우저 탭
32×32 px
작업 표시줄 아이콘
48×48 px
Windows 탐색기
180×180 px
iOS 주 화면

또한 정사각형 이미지를 사용하고 중요한 시각 요소가 중앙 영역에 있도록 하여 다양한 자르기 요구 사항에 적응하도록 하는 것이 좋습니다.

모범 사례 및 팁

  • Favicon 크기가 작기 때문에 많은 세부 사항을 피하고 단순하고 명확한 디자인을 사용하세요
  • 밝은 배경과 어두운 배경 모두에서 좋은 가시성을 확보하세요
  • 다양한 브라우저 테마에 적응하도록 투명 배경을 사용하세요
  • 모바일 기기를 위해 더 큰 크기의 아이콘(180×180px의 Apple Touch Icon과 같은) 제공하세요
  • Favicon을 업데이트한 후 최신 효과를 보려면 브라우저 캐시를 지워주세요

웹사이트 통합 방법

Favicon을 웹사이트에 추가하려면 HTML 문서의<head>섹션에 다음 코드를 추가하세요:

<!-- 표준 Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- ICO 형식 Favicon (전통 브라우저 지원) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple Touch Icon (iOS 기기) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- 웹사이트 응용 프로그램 매니페스트 (PWA) -->
<link rel="manifest" href="/site.webmanifest">

아이콘 파일을 웹사이트의 루트 디렉토리 또는 지정된 경로에 배치하고 실제 파일 위치와 일치하도록 href 속성을 업데이트하세요.

광고

API开发平台

快速构建、测试和部署API