로고, 스크린샷, 또는 SVG 마크가 있습니다. 이를 온라인 favicon converter에 넣으면 아이콘으로 가득 찬 ZIP 파일을 받습니다. 그런데 배포 후에도 브라우저 탭은 여전히 빈 사각형을 보여줍니다. 변환은 성공했습니다. 구현이 실패한 것입니다.

이 가이드에서는 converter가 실제로 무엇을 하는지, 아이콘 스택을 망가뜨리지 않고 사용하는 방법, 그리고 흔한 실패 지점이 어디에 숨어 있는지 살펴봅니다.

온라인 favicon converter가 실제로 생성하는 것

좋은 converter는 단순한 크기 조정 도구가 아닙니다. 하나의 소스 이미지를 받아 브라우저와 운영체제가 기대하는 아이콘 슬롯에 맞는 파일 세트를 출력합니다.

일반적인 출력물은 다음과 같습니다:

converter가 단일 ICO만 제공한다면 제 역할을 못 하는 것입니다. 나머지는 직접 수정해야 합니다.

시작하기: 올바른 소스 파일 선택

소스 이미지가 converter보다 더 중요합니다. 흰 배경의 200×200 JPG는 흐릿하고 박스형 아이콘을 만듭니다. 투명 배경의 1024×1024 PNG는 converter가 깨끗하게 다운샘플링할 여지를 줍니다.

벡터 소스의 경우, converter가 지원한다면 SVG가 최고의 입력입니다. SVG는 보간 아티팩트 없이 어떤 출력 크기로도 확장됩니다. 래스터 로고만 있다면 업로드 전에 가능한 한 가장 큰 깨끗한 버전을 내보내세요.

소스에 대한 세 가지 규칙:

  1. 정사각형 캔버스. 로고를 1:1 종횡비로 패딩하세요. 정사각형이 아닌 입력은 늘어나거나 레터박스 처리됩니다.
  2. 투명 배경. 특별히 단색 타일을 원하지 않는 한 배경을 제거하세요. 평면 JPG에서 시작한다면 투명 배경 favicon 만드는 방법을 참고하세요.
  3. 단순한 마크. 전체 워드마크는 16×16에서 읽을 수 없습니다. 먼저 심볼이나 모노그램을 추출하세요.

소스가 깨끗해지면 변환 단계는 쉬운 부분입니다.

주요 기능

모든 온라인 converter가 동일하게 만들어지지는 않았습니다. 차이는 ZIP을 다운로드한 후에 드러납니다.

다중 크기 ICO 출력

ICO 형식은 단일 이미지가 아니라 컨테이너입니다. 제대로 된 converter는 16, 32, 48 픽셀 프레임을 하나의 파일에 담아 Windows 작업 표시줄, 브라우저 탭, 북마크 바가 각각 올바른 해상도를 선택하도록 합니다. 단일 프레임 ICO는 브라우저가 다운스케일하도록 강제하여 부드러운 가장자리를 만듭니다.

Manifest 및 HTML 생성

converter는 바로 붙여넣을 수 있는 <head> 블록과 site.webmanifest를 출력해야 합니다. 이를 직접 작성하는 것이 대부분의 개발자가 오타를 내는 지점입니다. rel='icon' 명세는 짧지만 주변 태그(Apple Touch, maskable, theme-color)는 틀리기 쉽습니다.

다크 모드 인식

일부 converter는 이제 prefers-color-scheme 미디어 쿼리가 있는 SVG를 생성하여 브라우저가 다크 모드일 때 아이콘이 반전됩니다. 이는 선택 사항이지만 마크가 밝은 배경에 어두운 색일 때 유용합니다. 이것이 없으면 검은 아이콘이 어두운 탭 바에서 사라집니다.

민감한 로고에 대한 서버 왕복 없음

아직 공개되지 않은 브랜드 마크를 변환하는 경우, 도구가 이미지를 클라이언트 측에서 처리하는지 업로드하는지 확인하세요. 클라이언트 측 변환은 소스를 사용자 컴퓨터에 유지합니다.

깨끗한 아이콘 스택을 위한 프로 팁

converter가 파일을 넘겨준 후, 몇 가지 작은 습관이 대부분의 favicon 버그를 예방합니다.

다음은 converter가 생성해야 하는 최소한의 <head> 블록으로, 버전이 지정된 파일 이름에 맞게 조정되었습니다:

<link rel='icon' type='image/svg+xml' href='/favicon.svg?v=3'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png?v=3'>
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16.png?v=3'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png?v=3'>
<link rel='manifest' href='/site.webmanifest'>

converter가 이와 비슷한 것을 출력한다면 좋은 상태입니다. 한 줄만 출력한다면 직접 빈틈을 채워야 합니다.

converter가 잘못된 도구일 때

온라인 converter는 일회성 아이콘 세트에 적합한 선택입니다. 배포할 때마다 아이콘이 자동으로 재생성되어야 하거나 소스가 자주 변경되는 라이브 디자인 토큰인 경우에는 잘못된 선택입니다.

그런 경우에는 빌드 단계 도구나 동일한 변환을 로컬에서 실행하는 스크립트가 더 안정적입니다. 출력은 동일하며 차이는 재현성입니다.

그러나 일회성 프로젝트의 경우 온라인 favicon converter는 지루한 부분 — 크기 조정, ICO 컨테이너 패킹, manifest 작성 — 을 제거하고 실제로 사람이 필요한 부분 — 16픽셀에서 읽히는 마크 선택 — 만 남겨줍니다.