MultiKit
사용 방법
- 정사각형 이미지(PNG, JPG, WebP, SVG)를 상자에 놓거나 선택합니다. 512×512 이상을 권장합니다.
- 매니페스트에 쓰일 사이트 이름과, 애플 터치 아이콘·안드로이드 적응형 아이콘의 배경과 매니페스트에 쓰일 테마 색상을 정합니다.
- 미리보기를 확인하세요. 브라우저 탭은 실제처럼 보이는 16픽셀 아이콘을, 홈 화면은 배경색 위에 둥근 안드로이드 아이콘을 보여 줍니다.
- 파일을 각각 받거나 "모두 받기"로 ZIP을 받으세요. 파일을 사이트 루트에 두고 파일 목록 아래의 HTML을 페이지의 head 안에 추가하세요.
예시
1024×1024 로고, 테마 색상 #2563eb
→ favicon.ico(16, 32, 48), apple-touch-icon.png(180), icon-192.png, icon-512.png, icon-512-maskable.png, site.webmanifest사이트 루트에 바로 놓을 수 있는 파일 6개입니다.
1200×800 사진 (정사각형 아님)
→ 가운데를 기준으로 800×800 정사각형으로 잘린다는 안내가운데를 남기고 양옆을 잘라 냅니다.
투명 배경의 로고
→ favicon.ico와 안드로이드 아이콘은 투명도 유지, 애플 터치 아이콘은 테마 색상 배경iOS는 터치 아이콘의 투명도를 지원하지 않아 그곳에만 배경을 넣습니다.
계산 방식
이미지는 브라우저에서 읽어 가운데 기준 정사각형으로 자릅니다. 각 크기는 란초스 필터(오픈소스 jSquash 코덱 사용)로 다시 샘플링하는데, 특히 파비콘이 필요로 하는 작은 크기에서 단순 리사이즈보다 세부를 더 유지합니다. PNG는 이미지 변환기와 같은 코덱으로 씁니다. favicon.ico는 ICO 파일을 읽고 쓰는 오픈소스 라이브러리 icojs(MIT)로 만들며, 16·32·48픽셀 PNG를 브라우저가 기대하는 한 파일로 묶습니다.
애플 터치 아이콘은 테마 색상 위에 그립니다. iOS는 투명한 터치 아이콘을 비치게 두지 않고 검게 채우기 때문입니다. 적응형 안드로이드 아이콘은 이미지를 약 80%로 줄여 테마 색상 가운데에 놓은 것으로, 안드로이드 자체 안내가 설명하는 여백 방식이라 둥글거나 각진 마스크가 로고를 자르지 않습니다. 나머지 아이콘과 favicon.ico는 이미지 자체의 투명도를 유지합니다.
매니페스트는 입력한 사이트 이름과 테마 색상으로 만든 작고 올바른 JSON 파일이고, HTML 조각은 모든 파일이 사이트 루트에 있다고 가정하고 가리킵니다.
출처
자주 묻는 질문
- 이미지가 왜 정사각형이어야 하나요?
- 모든 아이콘 크기가 정사각형이라 정사각형이 아닌 이미지는 먼저 가운데 기준으로 정사각형으로 잘립니다. 가장자리에 중요한 부분이 있는 로고라면 올리기 전에 직접 정사각형으로 잘라 두어 무엇이 남을지 직접 정하세요.
- 적응형(maskable) 아이콘은 무엇에 쓰나요?
- 안드로이드는 앱 아이콘을 원, 둥근 사각형 등 다른 모양으로 보여 주며 가장자리를 잘라 냅니다. 적응형 아이콘은 로고가 잘리지 않도록 여백을 둡니다. 이 페이지는 이미지를 줄여 테마 색상 배경 위에 올려 만듭니다.
- 이 파일이 다 필요한가요?
- favicon.ico는 가장 많은 브라우저가 읽으므로 꼭 남겨야 합니다. 애플·안드로이드 아이콘은 사람들이 사이트를 홈 화면에 추가하거나 앱처럼 설치할 수도 있을 때 필요합니다. 해당 없으면 빼도 됩니다.
- 파일은 어디에 두나요?
- 사이트 루트, 예를 들어 example.com/favicon.ico처럼 index.html 옆에 둡니다. 파일 목록 아래의 HTML은 루트를 기준으로 가리키므로 다른 곳에 두면 경로를 바꾸세요.
- 내 이미지가 업로드되나요?
- 아니요. 모든 아이콘은 브라우저에서 만들며 이미지는 기기를 떠나지 않습니다.
관련 도구
버전 기록
- 1.0.1 — 검색 제목과 설명에서 지원 작업·주요 형식·개인정보 보호 장점을 더 분명하게 안내합니다.
- 1.0.0 — 첫 공개.