파비콘 변환기

래스터 이미지 한 장으로 웹사이트에 파비콘을 추가하는 데 필요한 파일을 만드세요. 원본 이미지를 정사각형 캔버스에 맞추는 방법과 배경을 정한 뒤, 다중 크기 ICO, PNG 아이콘 7개, 웹 앱 manifest, Windows 타일 설정 및 복사해 쓸 수 있는 head용 HTML을 담은 ZIP을 다운로드할 수 있습니다. 이미지 변환과 ZIP 생성은 브라우저 안에서 로컬로 처리됩니다.

이미지를 파비콘 묶음으로 변환하는 방법

  1. 1

    래스터 이미지 선택

    화면에 표시된 파일 크기와 이미지 치수 제한을 충족하는 PNG, JPEG 또는 WebP를 선택하세요. SVG, GIF, AVIF 파일은 지원하지 않습니다.

  2. 2

    맞춤 방식 선택

    채우고 자르기는 정사각형을 가득 채우고 가장자리를 자릅니다. 전체 맞춤 및 여백은 이미지 전체를 유지하고 둘레에 여백을 더합니다.

  3. 3

    배경 설정

    투명 픽셀과 전체 맞춤 및 여백 모드에서 생기는 여백에 적용할 배경색을 고른 뒤 생성된 미리보기를 확인하세요.

  4. 4

    다운로드 및 설치

    ZIP을 다운로드하고 아이콘과 설정 파일을 사이트에 배치한 다음, 제공된 link 태그를 문서의 head에 복사하세요.

ZIP에 포함되는 파일

묶음 항목 용도
favicon.ico 전통적인 파비콘 경로를 요청하는 브라우저와 소프트웨어를 위해 16, 32, 48, 256 px 항목을 담은 ICO 컨테이너
favicon-16x16.png 브라우저 탭과 작은 표시 영역을 위한 소형 PNG
favicon-32x32.png 고밀도 브라우저 탭과 북마크용 아이콘
favicon-48x48.png 데스크톱과 바로가기를 위한 추가 크기
mstile-150x150.png Windows 타일 설정이 참조하는 150 x 150 PNG
apple-touch-icon.png Apple 홈 화면 링크를 위한 180 x 180 PNG
android-chrome-192x192.png 웹 앱 manifest가 참조하는 192 x 192 앱 아이콘
android-chrome-512x512.png 웹 앱 manifest가 참조하는 512 x 512 앱 아이콘
site.webmanifest 호환 브라우저에 192 px와 512 px 아이콘 위치를 알려 주는 JSON 메타데이터
browserconfig.xml 생성된 아이콘 자산을 참조하는 Windows 타일 설정
favicon-head.html ICO, PNG, Apple 아이콘, manifest, 브라우저 설정을 페이지에 연결하는 복사용 태그

ICO와 PNG 파일은 용도상 분리되어 있습니다. 브라우저와 운영체제마다 아이콘을 선택하는 방식이 다르므로, 완전한 묶음은 전통적인 /favicon.ico 요청과 명시적인 최신 아이콘 선언을 모두 지원합니다.

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">
<meta name="msapplication-config" content="/browserconfig.xml">

파일을 하위 디렉터리나 별도의 자산 호스트에 둘 경우 태그를 <head>에 붙여넣기 전에 경로를 바꾸세요. site.webmanifestbrowserconfig.xml 안의 파일명과 경로도 실제 배포 위치에 맞아야 합니다.

채우기, 전체 맞춤, 배경 선택

  • 채우고 자르기는 모든 정사각형 출력을 이미지로 채웁니다. 가로 또는 세로로 긴 원본은 마주 보는 가장자리에서 같은 양만큼 잘리므로 중요한 그림은 중앙 가까이에 두세요.
  • 전체 맞춤 및 여백은 원본 전체를 보존합니다. 남는 공간은 선택한 배경색의 여백이 됩니다.
  • 배경은 투명하게 유지하거나 원하는 단색으로 설정할 수 있습니다. 전체 맞춤 및 여백 모드에서는 이미지 둘레의 여백에도 이 설정이 적용됩니다. 게시하기 전에 밝은 페이지 테마와 어두운 페이지 테마 모두에서 미리보기를 확인하세요.

작은 아이콘을 가장 선명하게 만들려면 512 x 512픽셀 이상의 단순한 정사각형 이미지를 사용하세요. 원본이 크더라도 가는 글자, 아주 얇은 선, 작은 세부 요소는 16 px 버전에서 사라질 수 있습니다.

입력 제한과 파일 배치

이 변환기는 PNG, JPEG, WebP 래스터 이미지만 받습니다. 이미지 시그니처를 검사하여 SVG, GIF, AVIF 및 나열되지 않은 형식을 거부합니다. 원본 파일은 최대 20 MiB, 각 변은 최대 8,192픽셀, 전체 화소 수는 최대 24메가픽셀이어야 합니다. 치수 제한은 전체 이미지를 디코딩하기 전에 검사합니다.

다운로드한 뒤 ZIP을 풀고, 제공된 코드가 사용하는 경로에 생성 파일을 업로드하세요. /favicon.ico와 같은 루트 상대 경로는 현재 도메인의 루트에서 파일을 제공한다는 뜻입니다. 브라우저는 일반 페이지 자산보다 아이콘 파일을 더 오래 보관할 수 있으므로 기존 파비콘을 교체할 때는 사이트 또는 CDN 캐시를 비우세요.

포함된 manifest는 아이콘 메타데이터를 제공하지만 manifest와 아이콘 묶음만으로 사이트가 설치 가능한 프로그레시브 웹 앱이 되지는 않습니다. 설치 가능 여부는 페이지 구성, 전송 보안, 각 브라우저의 요구사항에도 달려 있습니다.

자주 묻는 질문

PNG, JPEG 또는 WebP를 사용할 수 있습니다. 변환기는 파일명만 믿지 않고 파일 시그니처를 검사하며 SVG, GIF, AVIF 및 다른 형식은 거부합니다.

채우고 자르기는 정사각형이 가득 찰 때까지 이미지를 확대하고, 가로세로 비율이 정사각형이 아니면 양쪽 가장자리에서 같은 양을 자릅니다. 전체 맞춤 및 여백은 이미지 전체를 유지하고 남은 정사각형 영역을 선택한 배경색으로 채웁니다.

ICO는 여러 작은 아이콘 크기를 전통적인 파비콘 파일 하나에 저장할 수 있는 컨테이너입니다. 별도의 PNG는 탭, 홈 화면 링크, 앱 아이콘에 맞는 명확한 크기의 자산을 브라우저와 플랫폼에 제공합니다. 두 형식을 함께 쓰면 실제 지원 범위가 넓어집니다.

아닙니다. manifest는 생성된 앱 아이콘과 표시 관련 메타데이터를 설명하지만, 설치 가능 여부는 추가 브라우저 요구사항 및 사이트 자체의 제작과 제공 방식에 따라 결정됩니다.

제공되는 코드는 루트 상대 경로를 사용하므로 압축을 푼 파일을 도메인 루트에 두는 방법이 가장 간단합니다. 다른 폴더나 자산 호스트를 사용한다면 코드, manifest, 브라우저 설정 안의 경로를 실제 위치에 맞추세요.

아닙니다. 이미지 처리와 ZIP 생성은 브라우저 안에서 이루어집니다. 여러 단계 흐름에서는 단계 사이에 이미지를 전달하기 위해 이 브라우저의 IndexedDB에 이미지 초안을 최대 30분간 보관할 수 있습니다. 이 로컬 전달은 서버 업로드가 아닙니다.

관련 도구