아이콘 생성기
이미지 하나로 파비콘과 앱 아이콘을 한 번에 생성하세요
이미지 업로드 (256x256 이상 권장)
0.0B / 0.00%
출력 설정
정사각형 이미지 한 장에서 사이트에 필요한 파비콘과 앱 아이콘 전체를 만듭니다. ICO, 표준 크기 PNG, Apple 터치 아이콘, Android와 Windows 타일까지 묶어서 내려받습니다.
앱이나 사이트를 배포하려면 같은 그림을 열 가지가 넘는 크기로 만들어야 하고, 플랫폼마다 목록이 다릅니다. 파비콘 16·32·96픽셀, 애플 터치 아이콘 180픽셀, 안드로이드 런처 아이콘 192·512픽셀, 그리고 런처 모양에 맞춰 잘리는 maskable 변형까지 필요합니다.
원본 이미지 하나로 전체 세트를 만들며, 업로드 없이 브라우저에서 축소합니다. 1024픽셀 이상의 큰 정사각형에서 시작하라고 권하는 이유는 축소는 디테일을 지키지만 확대는 없는 것을 지어내기 때문입니다. 64픽셀 원본을 512로 키우면 도구가 무엇을 하든 흐릿합니다.
가장 자주 빠뜨리는 요구사항은 마스커블 아이콘입니다. 안드로이드는 런처 아이콘을 준 그대로 보여 주지 않고, 현재 런처가 쓰는 모양대로 잘라 냅니다. 기기에 따라 원일 수도, 둥근 사각형일 수도, 스퀘어클일 수도 있습니다. 그래서 캔버스를 꽉 채우도록 디자인한 아이콘은 모서리를 잃고, 가장자리 가까이에 글자가 있는 로고는 그 글자를 잃습니다. 관례는 안전 영역입니다. 중요한 요소는 이미지 가운데 80% 안에 두고 바깥 띠는 잘려 나갈 수도 있는 배경으로 취급하는 것입니다.
ICO는 이미지 형식이라기보다 컨테이너입니다. favicon.ico 하나가 여러 크기를 동시에 담을 수 있는 이유이고, 그렇게 하는 편이 나은 이유이기도 합니다. 브라우저는 필요한 크기에 가장 가까운 것을 고르는데, 16픽셀 항목 하나만 든 파일을 북마크 바나 고정 탭용으로 확대하면 32와 48까지 담긴 파일보다 눈에 띄게 나빠 보입니다. 180픽셀 터치 아이콘과 192·512 안드로이드 한 쌍도 같은 이야기입니다. 각각 그 크기를 요구하는 무언가가 있어서 존재하는 것이고, 그냥 만들어 주는 편이 플랫폼의 추측에 맡기는 것보다 쌉니다.
축소는 디테일을 유지하고 확대는 없던 것을 지어냅니다. 결과물의 품질 상한을 결정하는 단 하나의 규칙입니다. 1024픽셀 정사각형 원본은 깨끗한 16픽셀 파비콘을 만들지만, 64픽셀 원본을 512로 키우면 어떤 도구를 쓰든 흐릿해 보입니다. 투명 배경도 의식적으로 정할 문제입니다. 밝은 브라우저 크롬과 어두운 크롬 위에 모두 놓일 파비콘에는 투명 배경이 맞고, 안드로이드 마스커블 아이콘에는 맞지 않습니다. 플랫폼이 그림이 캔버스를 채운다고 전제하고 자르기 때문에, 빈 공간을 잘라 들어가게 됩니다.
SVG 파비콘은 래스터 세트와 함께 넣어 둘 만한 요즘의 추가 항목입니다. 지원하는 브라우저는 파일 하나를 어떤 크기로든 확대·축소하고, SVG 안의 미디어 쿼리로 밝은 브라우저 크롬과 어두운 크롬에 서로 다른 그림을 쓸 수도 있습니다. PNG로는 아예 할 수 없는 일입니다. 그렇다고 ICO를 대체하지는 않습니다. 북마크 내보내기, 오래된 브라우저, 운영체제 바로가기는 여전히 래스터 파일을 요구합니다. 둘은 함께 있습니다. 이해하는 브라우저를 위해 SVG를 먼저 선언하고, 시키지 않아도 /favicon.ico 를 요청하는 나머지 모두를 위해 ICO를 사이트 루트에 둡니다.
아니요. 크기 변환은 브라우저의 캔버스에서 이루어지며 전송되지 않습니다.
PNG 파비콘으로 현재 브라우저는 모두 커버되지만, 루트의 favicon.ico는 비용이 거의 없고 여전히 요청하는 클라이언트가 있으므로 넣어 두는 편이 좋습니다.
512×512 이상입니다. 작은 원본을 확대하면 큰 크기에서 흐릿해지며, 입력이 너무 작으면 도구가 경고합니다.