파비콘 만들기
이미지 한 장을 넣으면 favicon.ico, apple-touch-icon, 매니페스트 아이콘과 붙여 넣을 태그가 나옵니다.
여기에 파일을 끌어다 놓으세요
또는 클릭해서 기기에서 선택지원 형식: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
1회 최대 3개 파일파일당 최대 20MB하루 10회Pro로 제한 해제✓ 오프라인에서도 사용 가능
파일은 내 기기 밖으로 나가지 않습니다
이 도구는 브라우저 안에서만 작동합니다. 업로드도 저장도 하지 않으므로, 시작하기 전에 인터넷 연결을 끊어도 그대로 작동합니다.
사용 방법
- 로고를 추가합니다. 정사각형 SVG가 가장 좋고, 없으면 512 × 512px 이상의 PNG나 JPG를 씁니다.
- 정사각형 안에 넣는 방식(이미지 전체에 여백을 두거나 정사각형을 가득 채우기)과 모양, 배경을 고릅니다.
- ‘파비콘 만들기’를 누르고 모든 파일을 ZIP으로 한 번에 내려받습니다.
- 파일을 사이트 루트에 올리고 favicon-tags.html의 태그를 각 페이지의 <head>에 붙여 넣습니다.
자주 묻는 질문
- 어떤 파일이 만들어지고, 각각 어디에 쓰나요?
- 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>에 붙일 줄이 들어 있습니다.
- 배경을 투명으로 골랐는데 apple-touch-icon만 투명하지 않습니다.
- iOS는 홈 화면에서 투명을 보여 주지 않고 투명한 부분을 검게 칠하며, 모서리도 스스로 둥글게 깎습니다. 그래서 이 파일만은 항상 고른 배경색(투명이면 흰색)으로 채운 불투명한 정사각형으로 만듭니다. 다른 아이콘은 투명한 그대로입니다.
- SVG와 PNG 중 무엇으로 시작하는 게 좋나요?
- SVG가 있다면 SVG입니다. 크기마다 벡터에서 새로 그리기 때문에 16px 아이콘도 큰 이미지를 줄인 것이 아니라 16px로 그려지고, 최신 브라우저가 우선 사용하는 favicon.svg도 함께 만들어집니다. PNG나 JPG라면 512 × 512px 이상을 쓰세요. 디테일이 많은 로고는 어차피 16px에서 뭉개지므로 여백을 두거나 단순한 마크를 쓰는 편이 좋습니다.
- 구글 검색 결과에 제 아이콘 대신 지구본이 보입니다.
- 구글이 아이콘과 그것을 지정한 홈페이지를 모두 크롤링할 수 있어야 하고, 아이콘은 한 변이 48의 배수인 정사각형이어야 합니다. 여기서 만드는 96px 파일이 그 용도입니다. 파일을 올린 뒤 검색 결과에 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다.
- 로고가 업로드되나요?
- 아니요. 모든 파일은 이 페이지 안에서 브라우저의 캔버스로 그리고, ZIP도 여기서 묶습니다. 서버로는 아무것도 보내지 않습니다.