파비콘 생성기

SVG, PNG 또는 JPG로 완전한 파비콘 패키지 만들기

SVG, PNG 또는 JPG 로고 하나로 favicon.ico, 브라우저용 PNG, Apple Touch 아이콘, Android Chrome 아이콘, site.webmanifest와 바로 붙여 넣을 HTML 태그를 만듭니다. 모든 파일은 브라우저에서 비공개로 생성되며 하나의 ZIP으로 다운로드할 수 있습니다.

여기에 파일을 놓으세요

새 파일의 기본값을 편집하고 있습니다

배경

투명단색

모서리 둥글기

직접 입력 (px)

그림여백 (%)확대 비율 (%)

가로 정렬

세로 정렬

여백은 그림을 안쪽으로 들이고, 확대 비율은 크기를 키우며, 정렬은 그림이 상자를 다 채우지 않을 때 놓일 자리를 정합니다. 배경과 모서리 모양은 언제나 아이콘 전체를 채웁니다.

웹 매니페스트앱 이름짧은 이름

홈 화면이나 런처에서 전체 이름이 들어가지 않을 때 아이콘 아래에 표시됩니다. 12자 내외가 적당합니다.

최적화SVG 최적화

출력을 생성하기 전에 안전한 최적화 프리셋을 실행합니다.

로고를 추가하면 모든 파비콘 크기로 미리 볼 수 있습니다.

출력

head-tags.html

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

index.html을 뺀 나머지 파일을 사이트가 제공되는 폴더에 넣고, 이 태그를 모든 페이지의 head에 붙여 넣으세요.

아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.

파비콘이란?

파비콘은 브라우저가 페이지 제목 옆에 보여 주는 작은 아이콘으로 탭, 북마크, 방문 기록, 일부 검색 엔진의 결과에 나타납니다. 처음에는 사이트 루트에 두는 16 × 16 favicon.ico 하나였습니다. 지금은 크기가 다른 여러 파일이 같은 역할을 나눠 맡습니다. 브라우저 탭, 홈 화면 바로가기, 설치 안내가 저마다 아주 다른 크기로 아이콘을 그리기 때문입니다.

파일 하나가 아니라 파비콘 패키지가 필요한 이유

favicon.ico 하나만으로도 지금도 동작하지만, 그것만으로는 더 이상 충분하지 않습니다. 브라우저 탭은 .ico 안의 16 px이나 32 px 항목을 읽고, Safari는 페이지를 Home Screen에 추가할 때 180 px apple-touch-icon을 요구하며, Android Chrome은 설치 안내와 스플래시 화면을 위해 웹 매니페스트에서 192 px과 512 px PNG를 읽습니다. 이것들을 하나씩 내보내면 내보내기가 여섯 번, 잘림이 서로 달라질 기회도 여섯 번이고, 매니페스트는 손으로 작성해야 합니다. 원본 하나에서 한꺼번에 만들면 모든 크기가 똑같이 나오고, 파일을 한 번 끌어다 놓는 것으로 끝납니다.

파비콘 패키지를 만드는 방법

1
로고를 끌어다 놓거나 '파일 선택'을 눌러 추가합니다. SVG, PNG, JPG, WebP, GIF, BMP, AVIF, TIFF를 모두 지원하며 한 번에 최대 40개까지 가능합니다.
2
배경, 모서리 둥글기, 여백, 확대 비율, 정렬을 지정하고 매니페스트에 들어갈 앱 이름과 짧은 이름을 입력하세요. 값을 바꾸는 대로 모든 크기가 다시 그려집니다.
3
'모두 저장'을 누르면 favicon-package.zip을 내려받을 수 있습니다. 그다음 HTML 탭의 link 태그 네 개를 모든 페이지의 head에 붙여 넣으세요.

개인정보: 파일은 브라우저를 벗어나지 않습니다

변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.

로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.

자주 묻는 질문

어떤 파일을 받게 되고, 어디에 두어야 하나요?

favicon.ico(16, 32, 48 px가 한 파일에 들어 있습니다), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, 그리고 태그가 담긴 index.html입니다. index.html을 뺀 나머지를 사이트가 제공되는 폴더에 복사한 다음, link 태그 네 개를 모든 페이지의 head에 붙여 넣으세요.

SVG 대신 PNG나 JPG 로고를 써도 되나요?

네. SVG, PNG, JPG, WebP, GIF, BMP, AVIF, TIFF를 모두 지원합니다. 그래도 SVG가 더 나은 원본입니다. 모든 크기를 다시 샘플링하지 않고 벡터에서 새로 그리기 때문입니다. 512 px보다 작은 래스터 로고는 가장 큰 아이콘을 위해 확대되어 흐릿해 보이며, 그럴 때는 파일 행에 경고가 표시됩니다.

PNG 아이콘을 제공해도 favicon.ico가 여전히 필요한가요?

그대로 두세요. 어떤 태그도 다른 곳을 가리키지 않을 때 브라우저와 크롤러가 사이트 루트에서 요청하는 파일이고, 여러 크기를 한 파일에 담을 수 있는 유일한 형식입니다. PNG 항목은 그 형식을 선호하는 브라우저를 감당하고, 매니페스트는 Android의 설치 안내를 감당합니다.