파비콘 생성기
이미지 하나로 favicon.ico, Apple 터치 아이콘, Android 아이콘, 웹 매니페스트를 ZIP 하나에 만드세요.
파비콘 생성기는 로고나 이미지를 웹사이트에 필요한 아이콘 파일 세트로 바꿔요. 이미지를 가운데 정사각형으로 잘라 favicon.ico(16, 32, 48픽셀 크기 포함), 16~512픽셀 PNG 아이콘, 180 × 180 apple-touch-icon.png, site.webmanifest 파일을 모두 ZIP 하나로 만들어요. 사이트의 head 영역에 붙여넣을 HTML link 태그도 페이지에 표시돼요.
파비콘 설치하기
패키지 압축을 웹사이트 루트 폴더에 풀고, 페이지의 <head> 안에 다음 태그를 추가하세요:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">파비콘 생성기 사용 방법
- 1
로고 업로드
PNG, JPG, SVG, HEIC 이미지를 끌어다 놓거나 선택하세요. 512 × 512픽셀 이상의 정사각형 이미지가 가장 좋은 결과를 내요.
- 2
가운데에 있는지 확인
아이콘은 이미지 가운데에서 잘라내요. 로고가 가운데에 있지 않거나 이미지가 정사각형이 아니면 먼저 이미지 자르기로 1:1로 자르세요.
- 3
파비콘 패키지 다운로드
파비콘 패키지 다운로드 (ZIP)를 클릭해 모든 아이콘 파일과 매니페스트를 받으세요.
- 4
웹사이트에 추가
파일을 사이트의 루트 폴더에 올린 다음, 코드 복사를 클릭해 HTML 태그를 페이지의 head 영역에 붙여넣으세요.
주요 기능
- 여러 크기가 담긴 favicon.ico
- 브라우저 탭과 북마크용 16 × 16, 32 × 32, 48 × 48 아이콘이 담긴 ICO 파일 하나.
- 모든 기기용 PNG 아이콘
- 16, 32, 48, 64, 128, 192, 512픽셀 PNG 파일과 180 × 180 apple-touch-icon.png.
- 웹 앱 매니페스트
- Android와 설치형 웹 앱을 위해 192, 512픽셀 아이콘을 가리키는 site.webmanifest 파일.
- 작은 크기도 깔끔하게
- 원본 이미지에서 여러 단계에 걸쳐 줄이기 때문에 16, 32픽셀 버전이 더 깔끔해요.
- 바로 붙여넣는 HTML
- 아이콘과 매니페스트용 link 태그를 클릭 한 번으로 복사하세요.
자주 묻는 질문
파비콘 이미지는 어떤 크기여야 하나요?
가장 큰 아이콘도 선명하도록 512 × 512픽셀 이상의 정사각형 이미지를 쓰세요. 단순한 모양과 강한 색은 16 × 16에서도 알아보기 쉬워요.
ZIP에는 어떤 파일이 들어 있나요?
favicon.ico, favicon-16x16.png부터 favicon-512x512.png까지(16, 32, 48, 64, 128, 192, 512), 180 × 180 apple-touch-icon.png, site.webmanifest가 들어 있어요.
파비콘 파일은 어디에 두나요?
웹사이트의 루트 폴더, 즉 홈페이지와 같은 위치에 올리세요. 그런 다음 이 페이지에 표시된 HTML 태그를 모든 페이지의 head 영역에 붙여넣으세요.
로고 일부가 잘리는 이유는 뭔가요?
도구는 이미지에서 가운데에 놓인 가장 큰 정사각형을 가져와요. 로고가 가로로 길거나 가운데에 있지 않다면, 아이콘을 만들기 전에 둘레에 여백을 두고 정사각형으로 자르세요.
SVG 로고를 써도 되나요?
네. SVG는 이미지로 그려져 PNG와 ICO 파일로 저장돼요. ZIP에 SVG 파비콘은 포함되지 않아요.
매니페스트 파일을 수정해야 하나요?
네. site.webmanifest에는 임시 이름 App과 어두운 테마 색상이 들어 있어요. 텍스트 편집기로 열어 name, short_name, 색상을 사이트에 맞게 바꾸세요.