파비콘 생성기

이미지를 올리면 favicon.ico와 16·32·48·180·192·512px PNG 파비콘을 만들어 줍니다. 파일은 서버에 올라가지 않아요.

이 카드 영역으로 파일을 끌어다 놓아도 됩니다. 정사각형 이미지를 권장합니다.
업로드 없음 · 모든 변환은 브라우저에서 처리되어 파일이 외부로 전송되지 않습니다.

파비콘 생성기란

파비콘(favicon)은 브라우저 탭, 즐겨찾기, 모바일 홈 화면에 표시되는 작은 사이트 아이콘입니다. 이 도구는 로고나 이미지 하나를 올리면 웹사이트에 필요한 여러 크기의 파비콘을 한 번에 만들어 줍니다. 16/32/48px는 브라우저 탭과 favicon.ico용, 180px는 애플 터치 아이콘(아이폰 홈 화면), 192/512px는 안드로이드 및 PWA 매니페스트용입니다.

사용 방법

  • ① 파비콘으로 쓸 이미지를 선택하거나 끌어다 놓습니다(정사각형 권장).
  • ② 각 크기 PNG가 자동 생성됩니다. 미리보기를 확인하고 개별로 다운로드합니다.
  • ③ 'favicon.ico 다운로드'를 눌러 16·32·48px가 담긴 ICO 파일을 받습니다.
  • ④ 받은 파일을 사이트 루트에 두고, 아래 링크 태그를 <head>에 붙여넣습니다.

이 도구의 장점

대부분의 파비콘 사이트는 이미지를 서버에 업로드합니다. 이 도구는 사용자의 브라우저 안에서만 Canvas로 리사이즈하고 ICO 바이트를 직접 조립하므로 개인정보 측면에서 안전하고 빠릅니다.

만들어지는 파일

  • favicon.ico — 16·32·48px 이미지를 한 파일에 담은 아이콘 파일입니다. 주소창 옆이나 즐겨찾기 목록에 쓰입니다.
  • favicon-16x16.png · favicon-32x32.png · favicon-48x48.png — 브라우저 탭에서 선명하게 보이는 PNG입니다.
  • apple-touch-icon.png (180×180) — 아이폰·아이패드 홈 화면에 추가했을 때 쓰이는 아이콘입니다.
  • android-chrome-192x192.png · android-chrome-512x512.png — 안드로이드 홈 화면과 앱 설치 화면에 쓰입니다.
  • site.webmanifest — 192·512px 아이콘을 가리키는 매니페스트 파일로, 전체 다운로드(ZIP)에 함께 담깁니다.

이미지가 처리되는 방식

올린 이미지는 가로와 세로 중 긴 쪽을 한 변으로 하는 정사각형 안에 비율 그대로 가운데 배치된 뒤 각 크기로 다시 그려집니다. 직사각형 이미지를 넣어도 잘리지 않고, 짧은 쪽 양옆에 투명한 여백이 생깁니다. 축소할 때는 부드럽게 보간해 작은 크기에서도 형태가 뭉개지지 않도록 처리합니다.

favicon.ico는 만들어진 16·32·48px PNG를 표준 ICO 컨테이너 형식에 맞춰 바이트 단위로 직접 조립한 것입니다. 이 모든 과정이 브라우저 안에서만 이루어지므로 이미지가 외부로 전송되지 않습니다.

적용 방법

받은 파일을 사이트 최상위 폴더(루트)에 그대로 올린 뒤, 화면에 표시된 링크 태그를 HTML의 <head> 안에 붙여넣으세요. ico와 각 크기 PNG, 매니페스트까지 한 번에 등록하는 코드가 준비되어 있습니다. ZIP으로 받은 site.webmanifest는 사이트 이름 항목이 비어 있으니 서비스 이름을 채워 넣으면 됩니다.

활용 예시

  • 새로 만든 웹사이트에 브랜드 로고를 파비콘으로 등록하기
  • 블로그나 포트폴리오 탭 아이콘을 기본 아이콘에서 바꾸기
  • 홈 화면에 추가했을 때 흐릿하게 보이던 아이콘을 큰 크기로 다시 만들기
  • PWA 설치 화면에 필요한 192·512px 아이콘과 매니페스트 한 번에 준비하기
  • 로고 색을 바꾼 뒤 모든 크기의 아이콘을 다시 뽑기

주의점과 팁

  • 파비콘은 16px에서도 알아볼 수 있어야 합니다. 글자가 많은 로고보다 심볼 한 개나 머리글자 한두 자가 잘 보입니다.
  • 배경이 투명한 PNG를 쓰면 밝은 탭과 어두운 탭 어디에서도 자연스럽습니다. 다만 아주 밝거나 어두운 단색 로고는 한쪽에서 묻힐 수 있습니다.
  • 원본은 512px 이상 크기를 넣는 편이 좋습니다. 작은 이미지를 키우면 큰 크기에서 흐려집니다.
  • 브라우저는 파비콘을 오래 캐시합니다. 바꿔도 그대로라면 강력 새로고침을 하거나 잠시 뒤 다시 확인하세요.
  • 전체 다운로드는 ZIP으로 묶어 주며, 압축이 어려운 환경에서는 파일이 하나씩 순서대로 내려받아집니다.

자주 묻는 질문

favicon.ico 파일도 만들어지나요?

네. 16·32·48px 이미지를 담은 표준 ICO 컨테이너를 직접 조립해 favicon.ico로 내려받을 수 있습니다. 현대 브라우저는 PNG가 포함된 ICO를 지원합니다.

파일이 서버로 전송되나요?

아니요. 모든 변환은 사용자의 브라우저(Canvas)에서만 이뤄지며 이미지가 인터넷으로 업로드되지 않습니다.

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

정사각형에 가까운 PNG/JPG가 가장 깔끔합니다. 직사각형 이미지도 자동으로 정사각으로 맞춰 리사이즈하지만 여백이 생길 수 있으니 가급적 정사각 로고를 권장합니다.

ICO와 PNG 파비콘 중 무엇을 써야 하나요?

둘 다 두는 것이 가장 호환성이 좋습니다. 구형 브라우저와 기본 요청(/favicon.ico)을 위해 favicon.ico를, 선명한 표시와 모바일·PWA를 위해 32/180/192/512px PNG를 함께 등록하세요. 위 링크 태그에 모두 포함되어 있습니다.

어떤 크기의 파일이 만들어지나요?

16, 32, 48, 180, 192, 512px 여섯 가지 PNG와 16·32·48px를 담은 favicon.ico가 만들어집니다. 180px는 애플 터치 아이콘, 192·512px는 안드로이드와 PWA용입니다.

정사각형이 아닌 이미지는 어떻게 처리되나요?

가로와 세로 중 긴 쪽을 한 변으로 하는 정사각형 안에 비율 그대로 가운데 배치됩니다. 잘리지 않는 대신 짧은 쪽 양옆에 투명한 여백이 생깁니다.

한 번에 모두 받을 수 있나요?

전체 다운로드 버튼을 누르면 favicon.ico와 여섯 가지 PNG, site.webmanifest가 하나의 ZIP으로 묶여 내려받아집니다. 압축이 어려운 환경에서는 파일이 하나씩 순서대로 저장됩니다.

파비콘을 바꿨는데 그대로예요.

브라우저가 파비콘을 오래 캐시하기 때문입니다. 강력 새로고침을 하거나 시크릿 창에서 확인해 보고, 그래도 남아 있으면 잠시 뒤 다시 열어 보세요.