파비콘 만들기
로고를 웹사이트용 완전한 파비콘 패키지로 만드세요.
브라우저에서 실행됩니다. 파일이 기기 밖으로 나가지 않습니다.
- ICO와 모든 PNG 크기
- 바로 쓰는 HTML 코드
- 조절 가능한 여백
파비콘을 생성하는 방법
- 여기에 정사각형 로고나 이미지를 끌어다 놓으세요.
- 필요하면 여백과 배경을 조절하세요.
- ZIP을 다운로드하고 HTML 코드를 붙여넣으세요.
ZIP 안에 들어 있는 것
| 파일 | 크기 | 사용처 |
|---|---|---|
| favicon.ico | 16, 32, 48px를 한 파일에 | 오래된 브라우저, 북마크 |
| favicon-16x16.png | 16 x 16 | 브라우저 탭 |
| favicon-32x32.png | 32 x 32 | 브라우저 탭, 작업 표시줄 |
| apple-touch-icon.png | 180 x 180 | 아이폰과 아이패드 홈 화면 |
| android-chrome-192x192.png | 192 x 192 | 안드로이드 홈 화면 |
| android-chrome-512x512.png | 512 x 512 | 안드로이드 스플래시와 앱 아이콘 |
| site.webmanifest | 텍스트 파일 | 안드로이드에 사용할 아이콘을 알려줌 |
파일을 두는 위치
ZIP의 모든 파일을 웹사이트의 루트 폴더, 즉 index.html과 같은 폴더에 업로드하세요. 하위 폴더가 아닙니다. 그런 다음 제공된 HTML 코드를 모든 페이지의 head 안에, 공유 헤더 템플릿이 있다면 그 안에 붙여넣으세요.
여백과 배경 팁
- 로고가 정사각형 가장자리에 닿아 있다면 10~15%의 여백을 추가해, 16픽셀 크기에서 잘려 보이지 않게 하세요.
- 로고에 투명한 부분이 있고 브라우저 자체 탭 색상과 어울리지 않아 보이면 배경 채우기를 켜세요.
- 단순하고 대비가 강한 로고가 세밀한 디테일이나 얇은 글자가 있는 로고보다 16×16 크기에서 더 잘 보입니다.
파비콘 생성기 자주 묻는 질문
ZIP 안에는 무엇이 들어 있나요?
16, 32, 48픽셀 크기를 담은 favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome PNG 2개, site.webmanifest 파일이 들어 있습니다.
이 파일들은 어디에 두어야 하나요?
웹사이트의 루트 폴더에 업로드한 뒤, 모든 페이지의 head 안에 HTML 코드를 붙여넣으세요.
이미지가 미리 정사각형이어야 하나요?
정사각형 로고가 가장 깔끔한 결과를 줍니다. 정사각형이 아닌 이미지는 여백과 함께 정사각형 안에 맞춰지므로 이미지가 늘어나지 않습니다.
여백은 무엇을 하나요?
정사각형 안에서 로고 주변에 빈 공간을 추가해, 작은 아이콘 크기에서 디자인이 가장자리에 닿지 않게 합니다.
이미지가 업로드되나요?
아니요. 모든 아이콘 크기는 브라우저에서 생성되므로 이미지가 기기 밖으로 나가지 않습니다.
파일 6개가 모두 필요한가요, favicon.ico만 있으면 되나요?
최신 브라우저는 대부분 PNG 파일과 site.webmanifest를 사용합니다. favicon.ico는 오래된 브라우저와 일부 북마크 바를 위해 남아 있으므로, 가장 폭넓은 지원을 위해 모두 업로드하세요.
어떤 크기의 이미지로 시작해야 하나요?
최소 512×512픽셀입니다. 마스터 아이콘이 그 크기로 생성되므로, 더 작은 원본 이미지는 늘려서 맞추게 되어 흐릿해 보일 수 있습니다.
매니페스트 파일을 수정해야 하나요?
생성된 site.webmanifest는 사이트 이름에 임시 텍스트를 사용합니다. 이후 텍스트 편집기에서 열어 name과 short_name 항목을 사이트에 맞게 수정하세요.