파비콘 생성

저장하지 못합니다. 캔버스에 ico를 요청하면 오류를 내는 게 아니라 조용히 PNG를 돌려줍니다. 다만 .ico는 이미지 코덱이 아니라 여러 크기의 그림을 담는 봉투 형식이라, 안에 넣을 그림(PNG)은 브라우저가 만들고 봉투는 이 도구가 바이트 단위로 직접 씁니다. 만든 .ico 안에는 16·32·48px 세 장이 들어 있어서 탭·즐겨찾기·바탕화면 바로가기가 각자 필요한 크기를 골라 씁니다.

favicon.ico(16·32·48px를 한 파일에), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png(180px, 아이폰·아이패드 홈 화면), icon-192.png과 icon-512.png(안드로이드 홈 화면과 설치 배너), 그리고 site.webmanifest입니다. ZIP으로 한 번에 받거나 필요한 것만 개별로 받을 수 있고, 이 파일들을 가리키는 HTML도 함께 나옵니다.

고른 방식대로 처리하고, 어느 쪽을 골랐는지 화면에 적습니다. "가운데를 잘라서"는 짧은 변을 한 변으로 삼아 가운데만 남기므로 가로로 긴 로고는 양옆이 잘립니다. "여백을 붙여서"는 긴 변을 한 변으로 삼고 남는 자리를 배경색으로 채우므로 아무것도 잘리지 않지만 로고가 그만큼 작아 보입니다. 어느 쪽이든 사진을 늘이거나 눌러서 억지로 정사각형을 만들지는 않습니다.

파비콘의 근본적인 한계입니다. 16×16은 글자 한 자도 제대로 들어가지 않는 크기라, 글자가 포함된 가로형 로고를 통째로 줄이면 거의 항상 뭉개집니다. 로고에서 심벌 부분만 잘라내 쓰는 것이 일반적인 해법이고, 이 도구에 넣기 전에 "이미지 자르기"로 그 부분만 남기면 됩니다. 16px 미리보기를 실제 크기로 보여주는 이유가 만들기 전에 이 판단을 하시라는 것입니다.

파일을 웹서버의 어디에 둘지입니다. 기본값 "/"는 사이트 최상위(예: example.com/favicon.ico)를 뜻하고, 정적 파일을 하위 폴더에 모아 둔다면 "/static" 처럼 적으면 아래 HTML의 주소가 모두 그에 맞게 바뀝니다. favicon.ico만은 최상위에 두는 것이 안전합니다 — HTML에 아무것도 적지 않아도 브라우저가 그 자리를 먼저 찾아보기 때문입니다.

올라가지 않습니다. 이 사이트에는 업로드 경로도, 원격 URL을 읽어오는 경로도 없습니다. 크기를 줄이는 일도, .ico 봉투를 조립하는 일도, ZIP으로 묶는 일도 전부 브라우저 안에서 일어납니다.