파비콘 만들기 — 웹사이트에 필요한 모든 사이즈
이미지 한 장을 넣으면 favicon.ico, apple-touch-icon, 매니페스트 아이콘과 붙여 넣을 태그가 나옵니다.
여기에 파일을 끌어다 놓으세요
또는 클릭해서 기기에서 선택지원 형식: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
1회 파일 1개파일당 최대 20MB하루 5회Pro로 제한 해제✓ 오프라인에서도 사용 가능
파일은 내 기기 밖으로 나가지 않습니다
이 도구는 브라우저 안에서만 작동합니다. 업로드도 저장도 하지 않으므로, 시작하기 전에 인터넷 연결을 끊어도 그대로 작동합니다.
사용 예시
예: 1024 × 1024 PNG 잎사귀 한 장으로 텃밭 블로그의 파비콘 7개 만들기
블로그 ‘베란다 텃밭 일기’의 로고는 투명한 배경 한가운데 초록 잎사귀가 하나 있는 1024 × 1024 PNG입니다. 설정: 맞춤 방식 ‘이미지 전체’, 여백 10%, 모양 ‘둥근 모서리’, 배경 ‘흰색’, 사이트 이름 ‘베란다 텃밭 일기’.
- 사방에 10%씩 여백을 두므로 잎사귀는 아이콘의 80% 크기로 그려집니다. 16px이면 12.8px, 180px이면 144px, 512px이면 409.6px입니다.
- ‘파비콘 만들기’를 누르고 파일 7개를 ZIP으로 한 번에 내려받습니다.
- 파일을 사이트 루트에 올리고 favicon-tags.html의 네 줄을 모든 페이지의 head 요소에 붙여 넣습니다.
| 파일 | 크기(px) | 잎사귀 크기 | 쓰이는 곳 |
|---|---|---|---|
| favicon.ico | 16·32·48 | 12.8·25.6·38.4px | 브라우저 탭, 북마크, /favicon.ico를 찾는 크롤러 |
| favicon-96x96.png | 96 | 76.8px | 구글 검색 결과 (48의 배수) |
| apple-touch-icon.png | 180 | 144px | 아이폰·아이패드 홈 화면 (흰 정사각형) |
| web-app-manifest-192x192.png | 192 | 153.6px | 안드로이드 |
| web-app-manifest-512x512.png | 512 | 409.6px | 안드로이드와 설치형 웹 앱 |
| site.webmanifest | – | – | 이름 ‘베란다 텃밭 일기’, 짧은 이름 ‘베란다 텃밭’, 아이콘 2개, 색 #ffffff |
| favicon-tags.html | – | – | head 요소에 붙일 네 줄 |
흰 둥근 사각형 위에 잎사귀가 놓인 파일 7개가 나옵니다. 애플용만은 iOS가 모서리를 직접 둥글게 깎으므로 모서리 없는 흰 정사각형입니다. 원본이 PNG라 favicon.svg는 만들어지지 않습니다. 홈 화면 아이콘 아래에는 반각 12자 정도만 보이는데 한글은 한 글자가 두 자리를 차지하므로, 짧은 이름은 띄어쓰기에서 끊어 ‘베란다 텃밭’이 됩니다.
사용 방법
- 로고를 추가합니다. 정사각형 SVG가 가장 좋고, 없으면 512 × 512px 이상의 PNG나 JPG를 씁니다.
- 정사각형 안에 넣는 방식(이미지 전체에 여백을 두거나 정사각형을 가득 채우기)과 모양, 배경을 고릅니다.
- ‘파비콘 만들기’를 누르고 모든 파일을 ZIP으로 한 번에 내려받습니다.
- 파일을 사이트 루트에 올리고 favicon-tags.html의 태그를 각 페이지의 <head>에 붙여 넣습니다.
자주 묻는 질문
- 파비콘 사이즈는 얼마로 해야 하나요?
- favicon.ico 한 파일에 16 × 16, 32 × 32, 48 × 48픽셀을 담고, 아이폰·아이패드 홈 화면용으로 180 × 180 PNG, 안드로이드와 웹 앱용으로 192 × 192와 512 × 512 PNG를 둡니다. 구글 검색 결과는 48의 배수 크기를 권장하므로 96 × 96 PNG도 함께 만듭니다. 이 모두를 이미지 한 장에서 한 번에 만듭니다.
- 어떤 파일이 만들어지고, 각각 어디에 쓰나요?
- favicon.ico는 16·32·48px를 한 파일에 담은 것으로, /favicon.ico를 직접 찾는 브라우저와 크롤러용입니다. favicon-96x96.png는 검색 결과용이며, 구글은 48의 배수 크기를 권장합니다. apple-touch-icon.png(180px)는 아이폰·아이패드 홈 화면 아이콘입니다. web-app-manifest PNG 두 개와 site.webmanifest는 안드로이드와 설치형 웹 앱용입니다. SVG로 시작하면 favicon.svg가 추가되고, favicon-tags.html에는 <head>에 붙일 줄이 들어 있습니다.
- SVG와 PNG 중 무엇으로 시작하는 게 좋나요?
- SVG가 있다면 SVG입니다. 크기마다 벡터에서 새로 그리기 때문에 16px 아이콘도 큰 이미지를 줄인 것이 아니라 16px로 그려지고, 최신 브라우저가 우선 사용하는 favicon.svg도 함께 만들어집니다. PNG나 JPG라면 512 × 512px 이상을 쓰세요. 디테일이 많은 로고는 어차피 16px에서 뭉개지므로 여백을 두거나 단순한 마크를 쓰는 편이 좋습니다.
- 구글 검색 결과에 제 아이콘 대신 지구본이 보입니다.
- 구글이 아이콘과 그것을 지정한 홈페이지를 모두 크롤링할 수 있어야 하고, 아이콘은 한 변이 48의 배수인 정사각형이어야 합니다. 여기서 만드는 96px 파일이 그 용도입니다. 파일을 올린 뒤 검색 결과에 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다.
- 사이트 이름은 어디에 쓰이나요?
- site.webmanifest의 이름과 짧은 이름이 됩니다. 짧은 이름은 휴대폰 홈 화면 아이콘 아래에 보이는 이름으로, 반각 12자 정도만 들어가므로 한글은 약 6글자까지 그대로 쓰고, 더 길면 띄어쓰기에서 끊습니다. ‘베란다 텃밭 일기’는 ‘베란다 텃밭’이 됩니다. 비워 두면 이름 없이 아이콘만 적힙니다.
- 여백은 몇 %가 좋나요?
- 둥근 모서리나 원 모양이면 10% 정도가 무난합니다. 여백 없이 꽉 채우면 모서리를 깎을 때 로고 끝이 잘릴 수 있습니다. 반대로 여백 10%면 16px 아이콘에서 로고가 12.8px로 줄어드니, 탭에서 더 크게 보이게 하려면 단순한 마크로 5%를 써 보세요.
- 로고가 업로드되나요?
- 아니요. 모든 파일은 이 페이지 안에서 브라우저의 캔버스로 그리고, ZIP도 여기서 묶습니다. 서버로는 아무것도 보내지 않습니다.