파비콘 만들기

파비콘 생성기는 로고나 이미지 한 장으로 웹사이트에 필요한 파비콘 세트를 한 번에 만들어 주는 도구입니다. 브라우저 탭에 뜨는 favicon.ico는 물론, 아이폰 홈 화면(apple-touch-icon)과 안드로이드·PWA용 아이콘, 그리고 <head>에 붙여넣을 HTML 코드까지 함께 나옵니다. 이미지를 올리면 자주 쓰는 크기가 자동으로 만들어지므로, 원하는 파일만 골라 받거나 ZIP으로 한꺼번에 받으면 됩니다.

개인 프로젝트를 배포할 때마다 파비콘 하나 넣겠다고 온라인 생성기를 찾아 헤맸는데, 어떤 곳은 회원가입을 요구하고 어떤 곳은 내 로고를 서버에 올려야 해서 매번 찜찜했습니다. 정작 필요한 건 이미지 한 장을 여러 크기로 줄여 .ico로 묶고 링크 태그를 얻는 것뿐이었어요. 그 과정을 브라우저 안에서 끝내고 싶어서 만들었습니다.

사용 방법

지원하는 형식

넣을 수 있는 건 PNG·JPG·WebP·SVG 이미지이고, 파비콘은 아주 작게 줄어들기 때문에 정사각형에 가깝고 512px 이상인 이미지를 권장합니다. 결과로는 favicon.ico(16·32·48px 통합)와 16·32·48·180·192·512px PNG, 그리고 안드로이드·PWA용 site.webmanifest가 나옵니다. 투명 PNG·SVG의 투명도는 그대로 유지되며, 옵션에서 배경색 채우기·여백·둥근 모서리를 조절할 수 있습니다.

점선 영역에 로고 이미지를 끌어다 놓거나 클릭해서 선택합니다.
올리는 즉시 모든 크기가 자동으로 생성됩니다. 브라우저 탭 미리보기로 실제 모습을 확인하고, 필요한 파일을 낱개로 내려받거나 'ZIP 전체 다운로드'로 한 번에 받습니다.
내려받은 파일을 사이트 최상위 경로에 올린 뒤, 아래 HTML 코드를 복사해 페이지의 <head> 안에 붙여넣으면 파비콘이 적용됩니다.

자주 묻는 질문

이미지 한 장만 있으면 favicon.ico까지 만들어지나요?

네. 로고나 이미지를 하나 올리면 16·32·48px가 모두 담긴 favicon.ico와 함께 브라우저 탭용 PNG, 아이폰 홈 화면용(apple-touch-icon 180px), 안드로이드·PWA용(192·512px)까지 한 번에 생성됩니다. 낱개로 내려받거나 'ZIP 전체 다운로드'로 한꺼번에 받을 수 있습니다.

어떤 이미지를 올리는 게 좋나요?

정사각형에 가깝고 512px 이상인 이미지를 권장합니다. 파비콘은 16px까지 아주 작게 줄어들기 때문에, 여백이 적고 형태가 단순한 로고일수록 작은 크기에서도 또렷하게 보입니다. 배경이 투명한 PNG나 SVG를 올리면 투명도가 그대로 유지되고, 필요하면 옵션에서 배경색을 채울 수 있습니다.

만든 파비콘을 웹사이트에 어떻게 적용하나요?

내려받은 favicon.ico와 PNG 파일들을 사이트 최상위(루트) 경로에 올린 뒤, 화면 아래에 표시되는 HTML 코드를 복사해 페이지의 <head> 안에 붙여넣으면 됩니다. 안드로이드·PWA에 필요한 site.webmanifest 파일도 ZIP 안에 함께 들어 있어 그대로 올리면 됩니다.

이미지가 서버로 전송되나요?

아니요. 올린 이미지는 브라우저 안에서 캔버스로 직접 크기를 조절하고 인코딩하여 파비콘으로 만들어집니다. 파일이 외부 서버로 업로드되거나 저장되지 않으므로, 공개 전 로고나 내부용 이미지도 안심하고 사용할 수 있습니다.