Favicon Generator - Text to Favicon.ico

즉시 맞춤형 파비콘 생성 - 웹사이트, 앱, PWA에 적합

파비콘 생성

SVG 활성화

웹사이트에 파비콘을 설치하는 방법

사용자 정의 파비콘을 설치하여 모든 장치에서 웹사이트의 모양을 향상하세요. 새로 생성된 파비콘 패키지를 통합하려면 다음의 간단한 단계를 따르세요.

  1. 파비콘 생성: 파비콘 생성기를 사용하여 원하는 텍스트, 색상, 모양 및 글꼴로 사용자 정의 아이콘을 만듭니다. 파비콘 패키지를 다운로드하려면 '파비콘 생성'을 클릭하세요.

  2. 다운로드 및 압축 풀기: 생성되면 파비콘 패키지를 다운로드하고 웹사이트의 루트 디렉터리에 파일을 추출합니다.

  3. HTML 코드 추가: 다양한 장치와 브라우저 간의 호환성을 보장하려면 HTML 파일의 head 섹션에 다음 코드를 삽입하세요.

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

파비콘 생성기 사용 방법

  1. 원하는 텍스트 입력 (1-2자).
  2. 색상, 모양, 글꼴을 사용자 정의.
  3. '파비콘 생성' 버튼 클릭.
  4. 파비콘 패키지 다운로드.
  5. 제공된 코드를 사용하여 구현.

생성된 파비콘 크기

우리의 파비콘 생성기는 다음과 같은 필수 크기의 아이콘을 생성합니다:

일반적인 Apple Touch 아이콘 크기:

  • 57x57px: iPhone 및 iPod touch.
  • 60x60px: 최신 iPhone 터치 아이콘.
  • 72x72px: iPad 아이콘.
  • 76x76px: Retina 디스플레이가 있는 iPad.
  • 114x114px: Retina 디스플레이가 있는 iPhone.
  • 120x120px: 최신 iPhone의 Retina 터치 아이콘.
  • 144x144px: Retina 디스플레이가 있는 iPad.
  • 152x152px: Retina 디스플레이가 있는 iPad.
  • 180x180px: iPhone 6+ 및 최신 Retina 아이콘.

일반적인 아이콘 크기:

  • 16x16px: 브라우저 탭용 파비콘.
  • 32x32px: 표준 크기 파비콘.
  • 48x48px: Windows 바로가기.
  • 64x64px: Windows 바로가기.
  • 96x96px: Chrome 및 Android 기기.
  • 192x192px: Android 기기.
  • 512x512px: 고해상도 디스플레이 및 특정 Progressive Web Apps (PWAs)를 위한 아이콘.

추가 형식:

  • favicon.ico (32x32px): 구형 시스템 및 브라우저와의 최대 호환성을 위한 다중 해상도 아이콘 파일.
  • SVG 형식: 활성화된 경우, 패키지에는 다양한 크기와 기기에 적합한 확장 가능한 벡터 그래픽 아이콘(SVG)도 포함되어 있습니다.

여러 파비콘 크기가 중요한 이유

오늘날의 멀티 디바이스 환경에서 여러 파비콘 크기를 갖는 것은 중요합니다:

  • 모든 기기 및 브라우저에서의 호환성 보장
  • 고해상도 디스플레이에서 시각적 선명도 향상
  • Progressive Web Apps (PWAs)의 요구 사항 충족
  • 복잡한 브라우저 탭에서 인식도 향상

자주 묻는 질문