- 로고 이미지(PNG 권장, 투명 배경 가능)를 드래그 앤 드롭하거나 클릭해 업로드합니다.
- 앱 이름과 테마 색상(HEX 코드)을 입력하고, 배경 투명 여부를 선택합니다.
- "파비콘 패키지 다운로드" 버튼을 클릭하면 ZIP 파일이 생성됩니다.
- ZIP을 풀면 favicon.ico, 각 크기 PNG, apple-touch-icon.png, site.webmanifest가 포함되어 있습니다.
- 파일을 웹 서버 루트에 올리고 페이지 <head>에 제공된 link 태그를 추가하면 완료됩니다.
요즘 웹사이트는 favicon.ico 한 개로 끝나지 않습니다. 브라우저 탭, 모바일 홈 화면, PWA 설치 아이콘이 각각 다른 파일을 요구하므로 여러 크기를 한 번에 준비하는 것이 좋습니다. 이 도구가 만드는 ZIP에는 다음이 들어 있습니다.
- favicon.ico: 16·32·48px를 묶은 전통적 아이콘으로 브라우저 탭과 즐겨찾기에 쓰입니다.
- apple-touch-icon.png(180px): iOS Safari에서 홈 화면에 추가할 때 표시되는 아이콘입니다.
- icon-192·512.png + site.webmanifest: Android의 "홈 화면에 추가"와 PWA 설치, 스플래시 화면에 사용됩니다.
로고를 정사각형으로 다듬어야 한다면 파비콘 가이드에서 준비 요령을 확인하세요.
- 정사각형 이미지 준비: 원본이 직사각형이라면 미리 크롭해 정사각형 비율로 만든 뒤 업로드하세요. 비율이 맞지 않으면 중앙 크롭 처리되어 원하는 부분이 잘릴 수 있습니다.
- iOS 홈 화면 아이콘: apple-touch-icon.png(180×180px)가 없으면 iOS Safari에서 홈 화면에 추가할 때 아이콘이 뭉개집니다. 이 도구는 해당 파일도 자동 생성합니다.
- PWA 설치 아이콘: site.webmanifest의 192×192와 512×512 PNG는 Android Chrome의 "홈 화면에 추가"와 PWA 설치에 사용됩니다. 앱 이름과 테마 색상을 정확히 입력해 두세요.
favicon.ico만으로도 브라우저 탭에는 표시되지만, 모바일 홈 화면·PWA·소셜 미리보기에서 고화질 아이콘이 필요하려면 PNG 파일들도 있어야 합니다. 이 도구는 필요한 파일을 모두 한 번에 생성합니다.
최소 512×512px 이상의 정사각형 PNG를 권장합니다. 이 도구가 각 크기로 리사이즈하므로 원본이 크면 클수록 품질이 좋습니다.
"투명 배경 유지" 옵션이 켜져 있으면 PNG 파일은 투명하게, ICO 파일은 투명 채널을 포함해 생성됩니다. 브라우저가 ICO 내 투명도를 지원하면 배경색 없이 표시됩니다.
브라우저는 파비콘을 오래 캐시하기 때문입니다. 강력 새로고침(Ctrl+Shift+R 또는 Cmd+Shift+R)을 하거나, 주소창에 파비콘 파일 주소를 직접 열어 새 아이콘이 뜨는지 확인해 보세요. 그래도 안 바뀌면 파일 이름 뒤에 ?v=2 같은 쿼리를 붙여 캐시를 우회할 수 있습니다.
16×16처럼 아주 작은 크기에서는 가는 선이나 글자가 한두 픽셀로 뭉개집니다. 파비콘용으로는 전체 로고 대신 가장 알아보기 쉬운 심벌이나 머리글자 한 글자만 크고 굵게 담은 단순한 버전을 따로 준비하는 것이 좋습니다. 색 대비가 강하고 여백이 넉넉할수록 작은 크기에서도 또렷합니다.