Favicon은 브라우저 탭, 북마크, 홈 화면 단축키에 표시되는 작은 아이콘입니다. 작아 보여도 표시되는 위치에 따라 필요한 크기가 다릅니다. 탭에는 16×16, 북마크 바에는 32×32, iOS 홈 화면 추가에는 180×180(apple-touch-icon), Android에는 192×192 px가 사용됩니다.
이 도구는 Canvas API로 업로드된 이미지를 각 크기로 리사이즈하여 PNG로 생성합니다. canvas.width와 canvas.height를 목표 크기로 설정한 뒤 drawImage()로 원본 이미지를 그리면 브라우저가 자동으로 스케일을 조정합니다.
favicon.ico는 여러 크기의 이미지를 하나의 파일에 담는 특수한 컨테이너 형식입니다. 외부 라이브러리 없이 JavaScript로 직접 ICO 바이너리 구조를 조립합니다. 파일 앞에 각 이미지의 위치 정보를 담은 헤더를 쓰고, 그 뒤에 각 크기의 BMP 데이터를 이어붙이는 단순한 구조입니다.
생성된 모든 파일은 JSZip 라이브러리로 ZIP으로 묶어 다운로드합니다. 전 과정이 브라우저 내에서 완결되므로 이미지는 서버로 전송되지 않습니다.