파비콘·앱 아이콘 생성기

이 도구에 대하여

플랫폼별로 사용하는 파일

데스크톱 브라우저는 탭과 북마크에 쓸 아이콘을 <link rel="icon">에서 가져옵니다. 보통 일반 화면에서는 16픽셀 PNG를, 고밀도 화면에서는 32픽셀 PNG를 씁니다. 페이지에 지정된 아이콘이 없으면 브라우저는 대신 /favicon.ico를 요청합니다.

iPhone과 iPad는 사이트를 홈 화면에 추가할 때 180픽셀 apple-touch-icon.png를 사용합니다. Android와 설치된 웹 앱은 웹 매니페스트의 icons 목록을 읽어, 홈 화면에는 192픽셀, 스플래시 화면에는 512픽셀 아이콘을 쓰고, 런처가 아이콘 모양을 직접 정하는 경우에는 마스커블 아이콘을 씁니다. mstile-150x150.png는 구 버전 Windows의 타일용으로, 빠짐없이 갖추기 위해 포함했습니다.

favicon.ico가 여전히 중요한 이유

탭에서 연 PDF, 이미지, JSON 응답처럼 아이콘을 지정할 HTML head가 없는 경우, 브라우저는 스스로 /favicon.ico를 요청합니다. 피드 리더, 크롤러 같은 도구도 이 경로를 확인하는 경우가 많습니다. ICO 형식은 한 파일에 여러 크기를 담을 수 있으며, 여기서 만드는 파일에는 16, 32, 48픽셀 아이콘이 각각 PNG 데이터로 들어 있습니다. 이 방식은 Windows Vista 이후의 Windows와 현재의 모든 브라우저가 읽을 수 있습니다.

마스커블 아이콘과 안전 영역

Android 런처는 앱 아이콘을 원, 둥근 사각형 등의 모양으로 잘라 냅니다. 일반 아이콘은 잘리지 않도록 보통 축소되어 흰색 판 위에 놓입니다. 반면 마스커블 아이콘은 불투명한 배경으로 정사각형 전체를 채우고, 중요한 요소를 모두 안전 영역 안에 둡니다. 안전 영역은 가운데에 놓인 원으로, 지름이 아이콘 너비의 80%입니다. 이 원 밖의 부분은 잘릴 수 있습니다.

이 도구는 마스커블 아이콘을 앱 배경색으로 채우고, 이미지 둘레의 사방에 최소 14%의 여백을 둡니다. 원형 미리보기를 확인하고, 이미지의 모서리가 잘리면 여백을 늘리세요.

Apple은 투명도를 무시합니다

iOS는 홈 화면 아이콘의 투명 픽셀을 유지하지 않고 검은색으로 칠하며, 모서리도 직접 둥글게 처리합니다. 그래서 여기서 만드는 Apple 터치 아이콘은 항상 불투명한 정사각형으로, 앱 배경색으로 채워지고 최소 8%의 여백을 두며, 설정한 모서리 반경은 적용되지 않습니다.

실행 방식

아이콘은 WebAssembly로 컴파일된 Go의 이미지 패키지가 브라우저의 백그라운드 스레드에서 Catmull-Rom 리샘플링으로 그립니다. 아주 큰 원본은 먼저 페이지에서 축소해, 설정을 바꿀 때마다 빠르게 다시 그려지도록 합니다. 이미지는 업로드되지 않습니다.