파비콘 생성기 FAQ
자주 묻는 8개 질문 · 웹 표준 기준 · 업데이트 2026-08-24
자주 묻는 질문 (8)
파비콘은 몇 px 로 만들어야 하나요?
브라우저 탭은 16·32px, Windows 바로가기는 48px, iOS 홈 화면은 180px, Android 홈 화면과 PWA 는 192·512px 를 사용합니다. 멀티사이즈 favicon.ico 에 16·32·48 을 담고 PNG 로 180·192·512 를 함께 배포하면 현재 쓰이는 거의 모든 환경을 덮습니다. 이 도구의 "권장 세트" 프리셋이 정확히 그 조합입니다.
업로드한 이미지가 서버로 전송되나요?
전송되지 않습니다. 브라우저의 FileReader 로 파일을 읽고 Canvas 로 리사이즈한 뒤, 자바스크립트가 ICO 와 ZIP 바이너리를 직접 조립합니다. 이미지와 관련된 네트워크 요청이 한 건도 발생하지 않으며, 탭을 닫으면 메모리에서 사라집니다. 사내 로고나 공개 전 브랜드 자산도 안전하게 변환할 수 있습니다.
ICO 와 PNG 중 무엇을 써야 하나요?
둘 다 필요합니다. favicon.ico 는 여러 해상도를 한 파일에 담고 링크 태그 없이도 루트에서 자동 탐색되는 안전망 역할을 합니다. PNG 는 apple-touch-icon 이나 manifest 의 icons 배열처럼 특정 크기의 파일을 명시적으로 가리켜야 할 때 필요합니다. 두 가지를 함께 배포하는 것이 표준적인 구성입니다.
멀티사이즈 ICO 는 정확히 어떤 구조인가요?
맨 앞 6바이트가 ICONDIR 헤더로 예약값 0, 타입 1(아이콘), 이미지 개수를 담습니다. 그 뒤로 이미지 수만큼 16바이트 ICONDIRENTRY 가 이어지며 가로·세로·비트 심도·데이터 길이·파일 내 오프셋을 기록합니다. 실제 이미지 바이트는 엔트리 테이블 뒤에 순서대로 붙습니다. 가로·세로가 1바이트라 256px 은 0 으로 표기합니다.
투명 배경을 유지할 수 있나요?
가능합니다. 배경 옵션에서 "투명"을 고르면 알파 채널이 그대로 보존됩니다. 다만 검은색 로고를 투명 배경으로 내보내면 다크 모드 탭에서 보이지 않게 되고, iOS 는 apple-touch-icon 의 투명 영역을 검게 채웁니다. 180px 규격만큼은 배경을 채워 내보내는 편이 안전합니다.
SVG 를 올려도 되나요?
됩니다. SVG 는 벡터라 어떤 크기로 줄여도 선명합니다. 다만 width·height 속성이 없는 SVG 는 브라우저가 크기를 0 으로 읽는 경우가 있어, 이 도구는 viewBox 비율을 참고해 크기를 자동으로 주입한 뒤 렌더링합니다. 외부 폰트나 이미지를 참조하는 SVG 는 그 부분이 빠질 수 있습니다.
파비콘을 바꿨는데 그대로예요.
파비콘 캐시는 일반 캐시와 별도로 관리되고 매우 끈질깁니다. 강력 새로고침으로도 안 바뀌는 것이 정상입니다. favicon.ico?v=2 처럼 쿼리를 붙이거나 파일명 자체를 바꾸는 방법이 가장 확실합니다. CDN 을 쓴다면 엣지 캐시 무효화가 먼저이고, immutable 헤더로 배포했다면 파일명 변경 외에는 방법이 없습니다.
maskable 아이콘이 잘려 보입니다.
안드로이드는 매니페스트에 purpose maskable 로 선언된 아이콘을 원형이나 스퀘어클 형태로 잘라냅니다. 가장자리에 여백이 없으면 로고 끝이 잘립니다. 이 도구의 여백 슬라이더를 15~20% 정도로 올려 안전 영역을 확보한 뒤 192·512 규격을 다시 생성하세요.