SVG를 ICO로 변환 (파비콘)

업로드되지 않습니다. 이 사이트를 만든 이유가 바로 그것입니다. 변환은 WebAssembly로 브라우저 안에서 처리되므로 파일이 기기를 벗어나지 않고, 중간에 서버가 전혀 관여하지 않습니다. 페이지를 한 번 불러온 뒤에는 오프라인에서도 작동하며, 파일 크기 제한은 기기의 메모리뿐입니다.

각 크기가 조정이 아니라 새로 그려지기 때문입니다. 벡터가 크게 그려져 각 기록으로 줄어드니, 16px 아이콘이 도형이 허락하는 만큼 또렷합니다. 비트맵 원본은 자기 원본 해상도에 갇히지만, 벡터는 그 문제를 통째로 비껴갑니다.

기하학은 견디고 디테일은 아닙니다. 가는 획, 작은 글자, 섬세한 곡선은 원본이 아무리 완벽해도 16px에서 사라집니다. 단순하고 대비가 강한 형태가 잘 읽힙니다. 많은 디자인 시스템이 바로 이 경우를 위해 「마크만」의 단순화 버전을 둡니다.

둘 다 하세요. 그게 오늘의 모범 사례입니다. 최신 브라우저는 <link rel="icon" type="image/svg+xml">를 받고 SVG 안의 다크 테마 스타일도 존중합니다. 이 도구의 .ico는 사파리(여전히 SVG 파비콘을 무시합니다), 크롤러, 예전부터 /favicon.ico를 찾는 도구를 덮습니다.

256px PNG를 PNG를 ICO로 변환에 넣으면 결과의 95%를 얻습니다. 큰 이미지에서 줄이면 많은 것이 용서됩니다. 그래도 벡터는 16px에서 이깁니다. 도형에서 그리면 줄일 때 평균 내 버리는 획 두께를 지킵니다. 게다가 로고가 어차피 SVG로 있다면 원본에서 변환하는 편이 더 깨끗합니다.

너무 가는 디테일은 아이콘에서 살아남지 못합니다. 머리카락 같은 획은 32px 아래에서 사라지고 글자는 질감이 됩니다. 로고에 단순화가 필요하면 벡터에서 단순화하세요. 획을 굵히고 서명을 빼세요. 줄이면 알아서 살아남을 거라 기대하지 마세요. 그리고 SVG가 viewBox를 선언하는지 확인하세요. 크기 없는 파일은 엉뚱한 기본 크기로 그려질 수 있습니다.