파비콘 생성기

이미지 하나로 모든 크기의 파비콘을 만듭니다

불러오는 중…

이 도구가 도움이 됐나요?

이 도구는

파비콘 생성기는 이미지 하나로 웹사이트에 필요한 아이콘 파일 전부(16, 32, 48, 180, 192, 512px PNG와 16·32·48px을 합친 favicon.ico)를 한 번에 만들어줍니다. 예를 들어 정사각형이 아닌 로고를 올리면 기본으로 켜져 있는 '여백 자동 잘라내기'가 네 모서리의 색을 분석해 투명하거나 단색인 여백을 찾아내고, 콘텐츠 둘레에 4%의 여유를 남긴 채 정사각형으로 잘라 각 크기의 PNG를 만듭니다.

사용법

  1. 아이콘으로 쓸 이미지를 끌어다 놓거나 선택합니다.
  2. 자동으로 6가지 크기(16/32/48/180/192/512px)의 미리보기와 favicon.ico가 만들어집니다.
  3. 정사각형이 아닌 이미지라면 '여백 자동 잘라내기' 옵션을 켜고 끄며 결과를 비교합니다.
  4. 필요한 크기만 따로 받거나, PNG 6개와 ICO를 한 번에 내려받습니다.
  5. 화면에 표시된 HTML 코드를 복사해 사이트의 <head>에 붙여넣습니다.
  6. 만든 파일들을 사이트 루트(favicon.ico 등)에 올려 실제로 적용합니다.

자주 묻는 질문

어떤 크기의 파비콘이 만들어지나요?
16, 32, 48px(브라우저 탭용), 180px(iOS 홈 화면용 apple-touch-icon), 192px·512px(안드로이드용) PNG 파일과, 16·32·48px을 합친 favicon.ico 파일을 만듭니다.
정사각형이 아닌 이미지도 되나요?
됩니다. '여백 자동 잘라내기'를 켜면 이미지 네 모서리의 색을 분석해 투명하거나 단색인 여백을 찾아내 콘텐츠 중심으로 정사각형을 잘라냅니다. 끄면 가운데를 기준으로 정사각형 크롭합니다.
만든 파일을 사이트에 어떻게 적용하나요?
다운로드한 파일들을 사이트 루트에 올린 뒤, 화면에 함께 표시되는 HTML 코드(<link rel="icon" ...> 등)를 페이지의 <head>에 붙여넣으면 됩니다.
이미지가 서버에 저장되나요?
아닙니다. 이미지를 선택한 순간부터 크기별 아이콘 생성, ICO 변환, 다운로드까지 전부 브라우저 안에서 처리됩니다.
'여백 자동 잘라내기'는 정확히 어떻게 작동하나요?
이미지 네 모서리에서 10×10픽셀씩 색을 뽑아 평균을 내고, 그 색과 비슷하거나(투명도가 없을 때) 알파값이 10 이하로 투명한(투명도가 있을 때) 영역을 여백으로 봅니다. 여백이 아닌 부분의 경계를 찾아 콘텐츠 크기에 4%의 여유를 더한 정사각형으로 잘라냅니다.
favicon.ico 파일은 어떤 크기들을 담고 있나요?
16, 32, 48px 세 가지 PNG를 하나의 ICO 파일로 합칩니다. 오래된 브라우저나 즐겨찾기 아이콘처럼 ICO 형식을 요구하는 자리에 쓸 수 있습니다.
180px, 192px, 512px 크기는 각각 어디에 쓰나요?
180px는 iOS 홈 화면에 추가할 때 쓰는 apple-touch-icon, 192px와 512px는 안드로이드 홈 화면·PWA 아이콘용입니다. 16·32·48px은 브라우저 탭 파비콘용입니다.
PNG 배경이 투명한데 왜 여백이 제대로 안 잘리나요?
'여백 자동 잘라내기'는 네 모서리 색을 기준으로 여백을 판단합니다. 로고가 모서리까지 꽉 차 있거나 모서리마다 색이 다르면 여백을 정확히 못 찾을 수 있으니, 이때는 옵션을 끄고 가운데 정사각형 크롭으로 바꿔 비교해 보세요.
여러 크기를 각각 다시 만들지 않고 한 번에 받을 수 있나요?
네. 'PNG 전부 저장' 버튼으로 6개 크기를 한 번에, 'favicon.ico 저장' 버튼으로 ICO 파일을 따로 내려받을 수 있습니다.

비슷한 도구