파비콘 생성기
이미지, SVG, 문자 또는 이모지를 favicon.ico, 모든 PNG 아이콘 크기, Apple 터치 아이콘 및 웹 앱 매니페스트로 변환하여 하나의 ZIP으로 제공합니다. 무료이며 파일은 절대 기기 밖으로 나가지 않습니다.
미리보기
- 16
- 32
- 48 px
브라우저 탭
홈 화면: iPhone 및 Android
사이트에 파비콘 추가하기
ZIP에 포함된 파일을 아이콘 폴더에 업로드한 다음, 모든 페이지의 head 요소 안에 이 태그를 붙여넣으세요. 설정한 폴더, 이름 및 테마 색상을 반영합니다.
이용 방법
파비콘 생성기는 브라우저, 검색 결과 및 휴대전화에서 웹사이트를 표시할 때 사용되는 작은 아이콘을 만듭니다. 이 도구는 이미지, SVG, 문자 또는 이모지를 사용하여 다양한 크기의 favicon.ico(16, 32, 48 픽셀), 16~512 픽셀의 PNG 아이콘, 180 픽셀 Apple 터치 아이콘, Android용 마스크 가능 아이콘 및 site.webmanifest를 브라우저 내에서 직접 생성하고 페이지에 붙여넣을 수 있는 HTML 태그를 제공합니다.
- 소스 선택
이미지 또는 SVG를 선택하거나 문자나 이모지를 입력하세요. 입력하는 동안 모든 미리보기가 실시간으로 업데이트됩니다.
- 아이콘 스타일 지정
배경색, 모서리 반경 및 패딩을 설정한 다음 브라우저 탭과 홈 화면 미리보기를 확인하세요.
- 다운로드 및 추가
패키지를 생성하고 파일을 사이트에 업로드한 다음 페이지의 head 부분에 HTML 태그를 붙여넣으세요.
패키지 구성 내용
| 파일 | 픽셀 | 용도 |
|---|---|---|
| favicon.ico | 16, 32, 48 | 브라우저 탭 및 북마크. 브라우저는 자체적으로 /favicon.ico를 요청하기도 합니다. |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32, 48 | PNG 파일을 요구하는 테마 및 사이트 빌더의 사이트 아이콘 필드 |
| favicon-96x96.png | 96 | Google 검색 결과 및 고밀도 화면 |
| apple-touch-icon.png | 180 | iPhone 및 iPad 홈 화면 |
| icon-192.png, icon-512.png | 192, 512 | Android 홈 화면 및 설치된 웹 앱 |
| icon-maskable-192.png, icon-maskable-512.png | 192, 512 | 아이콘을 원형 또는 다른 모양으로 자르는 Android 런처 |
| favicon.svg | 제한 없음 | 최신 브라우저에서 모든 크기에 선명하게 표시되는 탭 아이콘입니다. SVG로 시작할 때 포함됩니다. |
| site.webmanifest | 텍스트 | 앱 이름, 색상 및 앱 아이콘 목록 |
| favicon-tags.html | 텍스트 | head 태그 안에 붙여넣을 HTML 태그 |
모든 크기는 동일한 512 픽셀 디자인에서 생성되어 단계별로 축소되므로 작은 아이콘도 매끄럽게 유지됩니다. ICO 파일에는 PNG 이미지가 포함되어 있으며 현재의 모든 브라우저와 Windows에서 이를 읽을 수 있습니다.
마스크 가능 아이콘 및 안전 영역
Android는 앱 아이콘을 원형, 둥근 사각형 또는 휴대폰 제조사가 선택한 다른 모양으로 자릅니다. 마스크 가능 아이콘은 배경으로 전체 사각형을 채우고 로고를 안전 영역(아이콘 너비의 80%에 해당하는 지름의 중앙 원) 안에 유지합니다. 로고 크기 설정은 마스크 가능 아이콘 내의 로고를 조정하며, 56% 이하로 설정하면 사각형 로고도 해당 원 안에 완전히 들어갑니다.
Apple 아이콘에 단색 배경이 있는 이유
iPhone과 iPad는 apple-touch-icon의 모서리를 자동으로 둥글게 처리하며 투명한 부분을 검은색으로 표시합니다. 따라서 Apple 아이콘은 단색 위의 완전한 사각형이며, 이는 지정한 배경색이거나 배경이 투명할 때 선택한 앱 아이콘 배경입니다.
이미지는 이 기기에만 보관됩니다
아이콘, 매니페스트 및 ZIP 파일은 브라우저에서 생성됩니다. 아무것도 업로드되지 않으며 계정, 워터마크 또는 제한이 없습니다.
자주 묻는 질문
웹사이트에 필요한 파비콘 크기는 무엇인가요?
브라우저는 탭과 북마크에 16 및 32 픽셀 아이콘을 사용하며, favicon.ico에는 48 픽셀 버전도 함께 포함됩니다. Google 검색용 96 픽셀 PNG, iPhone 및 iPad용 180 픽셀 apple-touch-icon, 그리고 Android 및 설치형 웹 앱용 웹 앱 매니페스트에 나열되는 192 및 512 픽셀 아이콘을 추가하는 것이 좋으며, 가능하면 마스킹 가능한 버전을 사용하는 것이 이상적입니다. 이 생성기는 이러한 모든 아이콘을 하나의 ZIP 파일로 만듭니다.
내 웹사이트 HTML에 파비콘을 어떻게 추가하나요?
ZIP 파일 내의 파일을 사이트의 루트 폴더 또는 도구에서 설정한 폴더에 업로드하세요. 그런 다음 이 페이지의 HTML 상자에 있는 태그를 모든 페이지의 head 요소 안에 붙여넣으세요. 여기에는 favicon.ico, 96 픽셀 PNG, apple-touch-icon.png 및 site.webmanifest에 대한 링크와 theme-color 메타 태그가 포함됩니다. 동일한 태그가 ZIP 파일 내의 favicon-tags.html에도 포함되어 있습니다.
이모지로 파비콘을 만들 수 있나요?
네, 가능합니다. 이모지를 선택하고 이모지 하나를 입력하거나 붙여넣으세요. 도구는 투명 또는 색상 배경 위에 모든 크기로 중앙 정렬된 이모지를 그립니다. 기기의 이모지 글꼴을 사용하므로 화면에 보이는 모습 그대로 생성되며, 다운로드한 아이콘은 모든 기기에서 동일한 모양을 유지합니다.
업로드한 이미지는 이 도구에서 비공개로 처리되나요?
네, 그렇습니다. 이미지는 브라우저에서 읽고 렌더링되며, 아이콘과 ZIP 파일도 브라우저 내에서 생성됩니다. 서버에 업로드되는 항목이 없으므로 아직 공개되지 않은 로고도 기기에 안전하게 유지됩니다.
파비콘 생성기의 제한 사항은 무엇인가요?
모든 크기에 대해 하나의 디자인을 생성하므로 16픽셀 아이콘, 다크 모드 아이콘 또는 애니메이션 파비콘을 별도로 추가하지 않습니다. 이모지 및 세리프, 모노스페이스, 시스템 글꼴은 기기에 설치된 글꼴을 사용하므로 다른 컴퓨터에서는 다르게 보일 수 있습니다. 산세리프 글꼴은 모든 환경에서 라틴 문자를 동일하게 렌더링합니다. 작은 원본 이미지는 180픽셀 및 512픽셀 크기에서 흐릿하게 보일 수 있으므로 512픽셀 이미지나 SVG로 시작하세요.
favicon.ico 파일이 여전히 필요한가요?
여전히 가장 안전한 선택입니다. 페이지에 아이콘 태그가 없을 때 브라우저는 /favicon.ico를 요청하며, 일부 구형 브라우저, 피드 리더 및 기타 도구는 해당 파일만 읽습니다. 이 도구에서 생성된 favicon.ico는 하나의 파일에 16, 32, 48픽셀 이미지를 포함하므로 일반 및 고밀도 화면에서 선명하게 표시됩니다.
마스커블 아이콘이란 무엇인가요?
마스커블 아이콘은 아이콘을 원형, 둥근 사각형 또는 기타 모양으로 자르는 Android 런처를 위한 앱 아이콘입니다. 배경은 전체 사각형을 채우고 로고는 안전 영역인 아이콘 지름의 80%에 해당하는 중앙 원 안에 위치합니다. 이 페이지의 미리보기는 안전 영역과 두 가지 일반적인 마스크를 보여줍니다.