파비콘 생성기 - favicon.ico 및 PWA 아이콘 생성

이 파비콘 생성기가 만드는 결과물

파비콘은 오래전에 단일 파일로서의 역할을 마쳤습니다. 브라우저 탭은 16픽셀을, 레티나 탭은 32픽셀을, Windows 바탕 화면 바로 가기는 48픽셀을, iPhone 홈 화면은 180픽셀 PNG를 원합니다. 또한 설치 가능한 웹 앱은 매니페스트에 선언된 192픽셀 및 512픽셀 아이콘을 요구합니다. 이 도구는 하나의 원본 이미지를 받아 이 모든 것을 한 번에 생성합니다: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, 그리고 이것들을 연결하는 네 줄의 HTML 코드와 함께 ZIP으로 묶인 site.webmanifest까지 제공합니다. .ico 파일은 변환기에 맡기지 않고 수작업으로 구성됩니다. ICO는 압축 코덱이 아닌 컨테이너 형식입니다. 6바이트의 디렉터리 헤더가 내부 이미지 개수를 기록하고, 각 이미지당 16바이트의 항목이 너비, 높이, 바이트 길이, 절대 오프셋을 기록하며, 그 뒤에 이미지 페이로드가 따라옵니다. 현재 사용되는 모든 브라우저는 이 페이로드에서 PNG 데이터를 허용하므로, 이 생성기는 아래에서 위로 행을 읽는 레거시 BMP/DIB 인코딩과 별도의 1비트 투명 마스크를 사용하는 대신 PNG를 기록합니다. 세 개의 이미지(16, 32, 48픽셀)가 포함되어 Windows 및 구형 브라우저가 하나의 이미지를 억지로 확대하지 않고 필요한 크기를 선택할 수 있도록 합니다. 만약 바이트를 직접 검사하게 된다면 알아둘 만한 형식의 특이점이 있습니다. 너비와 높이가 각각 1바이트를 차지하므로 256은 0으로 기록되며, 그보다 큰 값은 전혀 표현할 수 없습니다. 품질 크기 조정에도 동일한 주의를 기울였습니다. 1024픽셀 로고를 하나의 drawImage 호출로 곧바로 16픽셀로 줄이면 브라우저의 이중 선형 필터가 2x2 샘플로 64x64 블록을 요약해야 합니다. 이는 대부분의 원본 픽셀을 버리며, 손수 만든 파비콘에서 흔히 볼 수 있는 얼룩덜룩한 엉망이 됩니다. 이 도구는 이미지를 한 번에 절반 이상 축소하지 않고 반복적으로 크기를 줄여 각 단계에서 전체 인접 영역을 평균화하므로, 16픽셀까지 내려가도 미세한 디테일이 살아남습니다. 모서리 둥글기 와 여백은 렌더링 후처리가 아닌 렌더링 과정의 일부로 적용되어, 모든 크기에서 둥근 가장자리의 안티앨리어싱을 유지합니다.