이미지 한 장으로 파비콘 세트를 브라우저에서 바로 생성하는 도구

시작하며

웹사이트 제작의 필수 요소, 파비콘(favicon). 최근에는 단순한 favicon.ico뿐만 아니라 스마트폰용 Apple Touch Icon이나 다양한 해상도의 PNG 등 준비해야 할 이미지 종류가 부쩍 늘어났습니다.

이 파일들을 하나하나 리사이즈해서 내보내는 것은 매우 번거로운 작업입니다. 그래서 이미지 한 장만 업로드하면 필요한 아이콘 세트를 한꺼번에 생성하여 ZIP 파일로 다운로드할 수 있는 도구를 만들었습니다.

https://devtoolkits.app/ko/tools/favicon-generator

어떤 도구인가요?

1024x1024 정도의 큰 이미지(PNG/JPG/WebP)를 업로드하면 표준적인 파비콘 구성에 필요한 모든 파일을 생성합니다.

주요 특징

1. 📦 한꺼번에 생성: favicon.ico (16x16, 32x32 내장), apple-touch-icon.png (180x180), 각종 PNG (16x16, 32x32, 192x192, 512x512)를 동시에 만듭니다.
2. 🔒 안전한 브라우저 방식: 모든 이미지 처리는 Canvas API 등을 사용하여 브라우저 상에서 직접 수행됩니다. 서버에 이미지가 저장되지 않으므로 로고와 같은 기밀 데이터라도 안심하고 사용할 수 있습니다.
3. ⚡ ZIP 다운로드: 생성된 모든 이미지를 하나의 ZIP 파일로 묶어 다운로드할 수 있어 프로젝트에 즉시 도입하기 편리합니다.
4. 🖼️ 투명도 유지: 원본 이미지가 배경이 투명한 PNG라면 투명을 유지한 채 각 사이즈별로 내보냅니다.

사용 방법

1. 파비콘 생성 페이지를 엽니다.
2. 정사각형에 가까운(권장) 이미지를 드래그 앤 드롭하거나 선택합니다.
3. 미리보기 화면에서 각 사이즈별 상태를 확인합니다.
4. “Download All as ZIP” 버튼을 눌러 압축 파일을 저장합니다.

공개 전에 확인할 점

파비콘은 작게 표시되므로, 원본에서는 깨끗해 보여도 16x16에서는 글자가 뭉개질 수 있습니다. 로고에 가는 글자나 복잡한 선이 있다면 배경색을 더하거나 여백을 넓히거나 심볼만 남기는 식으로 조정한 뒤 다시 생성하면 보기 좋습니다.

도입 후에는 브라우저 탭, 북마크, 스마트폰 홈 화면 추가에서 보이는 모습을 확인합니다. 기존 사이트를 교체할 때는 캐시가 남을 수 있으므로, 파일명과 HTML 참조, manifest.webmanifest의 아이콘 지정도 함께 확인해 두면 안심입니다.

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

마치며

번거로운 아이콘 제작 작업은 단 몇 초 만에 끝내고, 더 본질적인 개발과 디자인 업무에 집중해 보세요!

자주 묻는 질문

파비콘은 어떤 크기를 준비해야 하나요?

최소한 favicon.ico(16x16·32x32 내장)와 apple-touch-icon.png(180x180)가 있으면 주요 브라우저와 iOS에 대응할 수 있습니다. PWA나 Android 홈 화면 대응까지 포함하려면 192x192·512x512 PNG와 manifest.webmanifest도 준비합니다. 이 도구는 이들을 한꺼번에 생성합니다.

원본 이미지는 어떤 형식·크기가 좋나요?

1024x1024 정도의 정사각형에 가까운 PNG/JPG/WebP를 권장합니다. 투명 PNG라면 투명도를 유지한 채 각 크기로 내보냅니다. 16x16에서는 세부가 뭉개지므로, 가는 글자나 복잡한 선은 심볼화하거나 여백을 더하면 가독성이 좋아집니다.

파비콘을 교체했는데 반영되지 않습니다

브라우저는 파비콘을 강하게 캐시합니다. 파일명을 바꾸기, HTML 참조와 manifest.webmanifest의 아이콘 지정 확인하기, 강력 새로고침이나 캐시 비우기를 하면 반영되는 경우가 많습니다.