파비콘 생성기
이미지 한 장으로 favicon.ico, PNG, apple-touch-icon, android-chrome, site.webmanifest 전체 파일셋을 생성합니다. 모든 처리는 브라우저에서 직접 이루어집니다.
이미지를 드래그하거나 클릭해서 업로드
PNG, JPG, WebP, SVG 지원 · Ctrl+V로 붙여넣기 가능
정사각형 이미지 권장 (최소 512×512)
파비콘 안내
파비콘을 만들 때 먼저 확인할 기준
파비콘은 단순히 파일을 만드는 작업이 아니라, 작은 크기에서도 브랜드가 식별되게 만드는 작업에 가깝습니다. 아래 기준을 같이 보면 실패 확률을 줄일 수 있습니다.
원본 이미지는 단순할수록 작게 줄여도 잘 보입니다
파비콘은 16px, 32px 같은 아주 작은 크기에서도 식별돼야 합니다. 세부 묘사가 많은 그림보다 단순한 형태와 강한 대비를 가진 심볼이 실제 브라우저 탭에서 더 잘 보입니다.
정사각형과 여백이 품질을 좌우합니다
직사각형 이미지를 억지로 줄이면 찌그러지거나 중요한 요소가 잘릴 수 있습니다. 로고 가장자리에 적당한 여백을 두면 작은 크기에서도 아이콘이 숨 쉴 공간이 생겨 더 선명하게 보입니다.
브라우저용과 앱 아이콘용 크기는 다릅니다
탭 아이콘은 작고, iOS 홈 화면과 안드로이드 PWA 아이콘은 훨씬 큰 해상도를 요구합니다. 하나의 이미지로 여러 환경을 커버하려면 출력 파일셋 전체를 함께 준비하는 것이 좋습니다.
생성 후 실제 환경에서 테스트해야 합니다
디자인 파일에서 좋아 보여도 브라우저 탭, 북마크, 홈 화면에서는 체감이 달라질 수 있습니다. 생성 후 실제 기기와 브라우저에서 작게 표시되는 모습을 확인하는 편이 가장 안전합니다.
자주 묻는 질문
원본 이미지 조건, webmanifest 역할, 브라우저 캐시처럼 파비콘 생성기에서 자주 묻는 질문을 정리했습니다.
파비콘 생성기로 어떤 파일들이 만들어지나요?
일반적으로 favicon.ico, 여러 크기의 PNG, apple-touch-icon, android-chrome 아이콘, site.webmanifest 같은 파일셋을 함께 생성합니다. 브라우저와 모바일 환경이 요구하는 대표 파일을 한 번에 준비하는 데 목적이 있습니다.
원본 이미지는 꼭 정사각형이어야 하나요?
정사각형 이미지가 가장 안정적입니다. 직사각형 이미지는 축소 과정에서 왜곡되거나 중요 요소가 잘릴 수 있어, 파비콘처럼 작은 아이콘 용도에는 1:1 비율이 훨씬 유리합니다.
투명 배경 PNG를 써도 되나요?
가능합니다. 투명 배경은 다양한 브라우저 배경색과 테마에서 자연스럽게 보일 수 있어 로고형 파비콘에 특히 유리합니다. 다만 너무 밝은 요소만 있으면 흰 배경에서 잘 안 보일 수 있습니다.
site.webmanifest는 왜 같이 필요한가요?
웹앱을 홈 화면에 추가하거나 PWA 형태로 배포할 때 앱 이름, 아이콘, 테마 색상 같은 정보를 브라우저에 알려주기 위해 필요합니다. 파비콘만으로는 커버되지 않는 앱 메타데이터를 담습니다.
파비콘을 바꿨는데 브라우저에서 바로 안 바뀌는 이유는 무엇인가요?
브라우저 캐시와 CDN 캐시 때문에 이전 아이콘이 잠시 유지될 수 있습니다. 파일명을 바꾸거나 캐시를 비운 뒤 다시 확인하면 갱신 여부를 더 빨리 확인할 수 있습니다.
관련 도구
이미지 전처리, 색상 조정, manifest 점검까지 이어서 작업할 때 함께 보기 좋은 도구들입니다.