무료 · 회원가입 불필요 · 자체 서버에서 실행

어떤 이미지로도 완벽한 파비콘 생성

이미지를 전문적인 파비콘으로 변환하세요. SVG, PNG, JPG 등 모든 주요 형식을 지원합니다. 모든 기기와 브라우저에서 완벽하게 표시되는 데 필요한 모든 크기의 파비콘 패키지를 다운로드하세요.

번개처럼 빠른 처리· SVG 지원· 다양한 형식

이미지 업로드

이미지를 끌어다 놓거나 클릭하여 선택하세요. 필요한 모든 크기의 파비콘을 생성해 드립니다.

여기에 이미지를 놓으세요

또는 클릭하여 파일 찾기

파일 선택
PNGJPGGIFWEBPBMPSVGICO≤10MB
파비콘 패키지를 생성하는 중…
죄송합니다. 해당 파일을 처리할 수 없습니다. 10 MB 미만의 정사각형 PNG, JPG, GIF, WebP, BMP 또는 SVG 파일을 사용해 주세요.
favicon preview

파비콘 패키지가 준비되었습니다

ICO, PNG, Apple 터치 아이콘, Android 아이콘 및 web manifest가 포함된 ZIP 파일입니다.

파비콘 패키지 다운로드

완벽한 파비콘에 필요한 모든 것

어디서나 선명하게 작동하는 아이콘을 만드는 데 필요한 모든 도구와 형식을 갖춘 전문 파비콘 생성기 하나로 끝내세요.

번개처럼 빠른 처리

최적화된 변환 엔진으로 몇 초 만에 이미지를 처리합니다. 기다림이나 지연이 없습니다.

SVG 지원

SVG 파일을 완벽하게 지원하며, 깔끔한 최적화와 스케일링으로 완벽한 결과물을 얻으세요.

모든 기기 지원

데스크톱, 모바일, 태블릿, PWA에 필요한 모든 크기의 파비콘을 생성합니다.

완전한 패키지

ICO, PNG 파일, Apple 터치 아이콘, web manifest까지 모두 다운로드하세요.

다양한 형식

PNG, JPG, GIF, WebP, BMP, SVG를 지원하여 널리 쓰이는 모든 형식에서 변환할 수 있습니다.

바로 사용 가능

HTML 코드 조각과 설치 안내가 제공되어 즉시 적용할 수 있습니다.

크로스 브라우저

Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저와 완벽하게 호환됩니다.

고화질

고급 이미지 처리 기술로 모든 크기에서 파비콘이 선명하고 깨끗하게 유지됩니다.

전문성

전 세계 최고의 웹사이트가 사용하는 업계 표준 파비콘 패키지를 생성합니다.

8+
지원 형식
6
파비콘 크기
100%
브라우저 호환
0s
처리 시간

간편한 설치 가이드

아래의 간단한 단계를 따라 새 파비콘을 웹사이트에 추가하세요.

1

파비콘 패키지 다운로드

위의 생성기로 완전한 파비콘 패키지를 만들어 ZIP 파일로 다운로드하세요.

2

파일 압축 풀기

ZIP의 모든 파일을 웹사이트 루트 디렉터리(index.html과 같은 폴더)에 압축 해제하세요.

3

HTML 코드 추가

아래 HTML 코드를 복사하여 페이지의 <head> 섹션 안에 붙여넣으세요.

4

파비콘 테스트

사이트를 배포한 후 브라우저 탭, 북마크, 모바일에서 파비콘이 표시되는지 확인하세요.

프레임워크별 연동 코드

사용 중인 스택을 선택하고 바로 붙여넣을 수 있는 코드를 복사하세요. 파일은 사이트 루트에 두면 됩니다(Next.js App Router의 경우 app/ 폴더).

index.html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}
// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<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="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})
// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.
// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>
파일은 어디에 두나요? favicon.ico, icon.png, apple-icon.png을 app/ 폴더에 바로 넣으세요. Next.js가 자동으로 감지하므로 link 태그를 수동으로 추가할 필요가 없습니다.
site.webmanifest
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

포함된 파일

파비콘 패키지에는 다음 파일들이 포함되어 있습니다.

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

프로 팁

  • 최상의 호환성을 위해 모든 파비콘 파일을 웹사이트 루트에 보관하세요.
  • 파비콘 업데이트 후 강력 새로고침(또는 캐시 삭제)을 하면 변경 사항이 바로 적용됩니다.
  • 파비콘이 올바르게 표시되는지 여러 기기와 브라우저에서 테스트하세요.

자주 묻는 질문

파비콘 생성과 적용에 관한 흔한 질문에 대한 답변입니다.

어떤 이미지 형식을 지원하나요?
PNG, JPG, GIF, WebP, BMP, SVG 파일을 업로드할 수 있습니다. 가장 선명한 결과를 얻으려면 최소 512×512 픽셀의 정사각형 이미지로 시작하세요. 최대 10 MB 파일까지 허용됩니다.
원본 이미지는 얼마나 커야 하나요?
512×512 이상의 정사각형 원본 이미지가 이상적입니다. 생성기가 깔끔하게 축소하므로, 크고 선명한 원본이 가장 보기 좋은 작은 아이콘을 만듭니다.
SVG 파비콘을 지원하나요?
네. SVG 파일은 최신 브라우저에서 선명하게 렌더링되도록 벡터 형식의 favicon.svg로 보관되며, 구형 브라우저를 위해 모든 PNG 및 ICO 크기로도 래스터 변환됩니다.
어떤 크기의 파비콘이 생성되나요?
패키지에는 16×16 및 32×32 PNG, 다중 해상도 favicon.ico, 180×180 Apple 터치 아이콘, 192×192 및 512×512 Android/PWA 아이콘과 web manifest가 포함됩니다.
파비콘을 웹사이트에 어떻게 추가하나요?
ZIP을 사이트 루트에 압축 해제하고 제공된 HTML 코드 조각을 페이지의 <head>에 붙여넣으세요. 위에 전체 설치 안내와 프레임워크별 코드가 나와 있습니다.