SVG를 ICO로 변환 (파비콘)

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

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

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

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

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

갈 곳 없는 디테일에서입니다. 머리카락 같은 획은 32px 아래에서 사라지고 글자는 질감이 됩니다. 로고에 단순화가 필요하면 벡터에서 단순화하세요. 획을 굵히고 서명을 빼세요. 축소의 자비를 바라지 마세요. 그리고 SVG가 viewBox를 선언하는지 확인하세요. 크기 없는 파일은 놀라운 예비 크기로 그려질 수 있습니다.