파비콘 생성기

아이콘 하나가 파일 아홉 개가 된 이유

세트의 각 파일은 그 파일만 읽는 특정 대상이 있기 때문에 존재합니다. 16, 32, 48을 담은 favicon.ico는 지금도 브라우저가 기본적으로 사이트 루트에서 찾는 파일이며, 오래된 소프트웨어 상당수가 가장 먼저 확인하는 파일입니다. favicon-16x16.png와 favicon-32x32.png는 최신 브라우저가 탭에 선호하는 파일입니다. 정확한 크기의 PNG가 크기 조정보다 낫기 때문입니다. 180픽셀의 apple-touch-icon.png는 iOS가 홈 화면에 올리는 아이콘인데, 투명도를 지원하지 않으므로 모서리가 검게 나오지 않도록 단색 배경 위에 합성합니다. android-chrome-192x192.png와 512x512.png는 설치된 프로그레시브 웹 앱이 런처 아이콘과 스플래시 화면에 쓰는 파일로, site.webmanifest에 선언됩니다.

큰 PNG 하나로 전부 해결하는 것은 가장 흔한 지름길이지만 어디서나 제대로 작동하지 않습니다. 브라우저는 16픽셀을 그리려고 0.5 MB를 내려받고, iOS는 투명도 규칙을 무시하고 로고를 검은 정사각형 위에 올리며, 런처 아이콘은 플랫폼이 적용하는 마스크에 따라 잘려 나갑니다. 세트가 번거로운 이유는 바로 각 사용처가 까다롭기 때문입니다.

HTML 코드는 이미지만큼 중요합니다. 브라우저는 대부분의 파일을 스스로 찾지 못합니다. 관례상 루트의 favicon.ico만 자동으로 찾기 때문에, link 태그가 나머지 파일을 연결해 주고 매니페스트에도 별도의 태그가 필요합니다. 코드는 루트 기준 경로를 사용하므로 파일이 웹 루트에 있는 한 수정 없이 작동합니다. 하위 폴더에 둔다면 코드와 매니페스트의 경로를 모두 고쳐야 합니다.

16픽셀을 먼저 생각하고 디자인하세요. 그 크기에는 모양 하나와 색 두 가지 정도만 들어갑니다. 텍스트도, 그라데이션도, 세밀한 부분도 안 되고, 전체 워드마크는 더더욱 안 됩니다. 정사각형이고 굵직하며 대비가 강한 512픽셀 이상의 원본이나 SVG가 가장 깔끔한 세트를 만듭니다. 미리보기는 16px 렌더링을 보기 좋게 꾸미지 않고 있는 그대로 보여 줍니다. 나중에 실망을 안기는 건 바로 그 크기이기 때문입니다. 정사각형이 아닌 원본은 자르거나 늘리지 않고 투명한 여백으로 채워 정사각형으로 만듭니다.

다른 작업이 필요할 때

여기서 생성하는 세트는 실용적인 최신 핵심 구성입니다. Windows 타일 이미지, Safari 고정 탭 마스크 아이콘, Microsoft browserconfig, 예전 Apple 크기까지 전부 필요하다면 RealFaviconGenerator가 이를 모두 다루고 이후 실제 사이트까지 점검해 줍니다. 이 도구로는 할 수 없는, 정말 유용한 기능입니다.

빌드 파이프라인에서는 아이콘을 손으로 생성하는 방식 자체가 맞지 않습니다. favicons, pwa-asset-generator, 그리고 sharp 기반의 프레임워크 플러그인은 배포할 때마다 원본 파일 하나로 전체 세트를 만들어 주므로, 로고가 바뀌어도 아이콘이 옛 버전으로 남지 않습니다. 실제로는 늘 그런 일이 생기기 마련입니다.