파비콘 사이즈: 실전 체크리스트와 생성 가이드

쓸 만한 파비콘 패키지는 만능 파일 하나가 아니라 브라우저 아이콘, iOS 홈 화면 아이콘, 웹 앱 매니페스트 아이콘으로 나뉩니다. 브라우저 UI에는 ICO와 작은 PNG, iOS 홈 화면에는 180×180 Apple touch 아이콘, 설치형 앱 표현이 필요할 때는 별도의 마스커블 이미지를 포함한 매니페스트 아이콘을 준비하세요. JustFavi는 PNG나 JPEG 하나로 이 구성을 만들지만, 배포 전에는 결과물을 짧게라도 검토해야 합니다.

아이콘마다 역할이 다르다

favicon.ico와 작은 PNG는 브라우저 아이콘입니다. HTML 표준은 rel="icon"을 정의하고, 비트맵 파일에 실제로 들어 있는 크기를 페이지가 알릴 수 있게 합니다. 아이콘 링크가 없을 때 브라우저가 /favicon.ico를 찾을 수도 있습니다. ICO는 호환성을 위해 여러 래스터 크기를 파일 하나에 담을 수 있고, PNG 링크는 개별 크기와 타입을 문서에 명확히 표시합니다.

apple-touch-icon.png는 iOS 홈 화면 Web Clip용입니다. Apple의 Safari 문서는 rel="apple-touch-icon"과 Retina iPhone용 180×180 아이콘을 안내합니다. 이 파일은 favicon.ico를 대체하지 않으며, 반대로 브라우저 탭 아이콘으로 대신할 수도 없습니다.

site.webmanifest는 웹 애플리케이션을 브라우저와 운영체제에 설명합니다. 매니페스트의 icons 항목은 앱 목록, 작업 전환 화면, 시스템 설정 같은 곳에서 애플리케이션을 나타낼 이미지 리소스를 나열합니다. 문서의 rel="icon" 링크와는 별개의 구성입니다.

마스커블 아이콘은 기기마다 다른 모양으로 잘려도 버티도록 만든 이미지입니다. 런처는 아이콘을 원, 둥근 사각형 또는 다른 마스크로 자를 수 있습니다. 웹 앱 매니페스트 표준은 아이콘의 짧은 변을 기준으로 반지름이 40%인 중앙 원을 안전 영역으로 보장하지만, 그 밖의 내용은 잘릴 수 있습니다. 따라서 일반 투명 아이콘과 마스커블 아이콘을 같은 파일처럼 취급하면 안 됩니다.

현재 JustFavi가 받는 파일과 만드는 파일

현재 생성기는 한 번에 파일 하나를 받습니다. PNG(.png, image/png) 또는 JPEG(.jpg/.jpeg, image/jpeg)여야 하고 확장자와 MIME 타입이 서로 맞아야 하며, 용량은 1KB(1,024바이트) 이상 10MiB 이하여야 합니다. 고해상도 정사각형 원본이 가장 안전합니다. 생성기가 정사각형이 아닌 로고를 비율 변화 없이 정사각형으로 만들어 주지는 않습니다.

다운로드한 ZIP에는 다음 고정 파일이 들어 있습니다.

• favicon.ico
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png
• favicon-180x180.png, favicon-192x192.png, favicon-256x256.png, favicon-512x512.png
• 180×180 크기의 apple-touch-icon.png
• android-chrome-192x192.png, android-chrome-256x256.png, android-chrome-512x512.png
• maskable-192x192.png, maskable-512x512.png
• site.webmanifest
• favicon-code.html

Apple과 Android 파일은 해당 크기의 파비콘 PNG와 같은 픽셀을 플랫폼용 파일명으로 한 번 더 담습니다. 마스커블 파일은 다릅니다. JustFavi가 불투명한 흰 배경 위에 아이콘을 80% 비율로 배치합니다. 매니페스트는 Android 파일 3개와 마스커블 파일 2개를 참조합니다.

실제 배포 파일과 맞는 HTML부터 적용하기

생성된 파일을 사이트 루트에 배포한다면 다음 코드를 문서 <head>의 출발점으로 쓸 수 있습니다.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

패키지를 하위 경로에 둔다면 경로를 바꾸세요. 이때 site.webmanifest 안의 URL도 함께 수정해야 합니다. HTML의 참조만 옮기면 매니페스트 아이콘은 깨집니다. 생성된 매니페스트의 기본값인 My App, App, /, 흰색 테마·배경도 실제 사이트의 이름, 시작 URL, 색상으로 교체합니다.

생성기의 알려진 한계 확인하기

• 투명 테두리만 감지해 잘라냅니다. 바깥쪽의 완전히 투명한 픽셀을 제거한 뒤 10%의 투명 여백을 더합니다. 흰색이나 다른 색의 여백은 제거하지 못하고, 투명한 가장자리가 없는 JPEG에서는 잘라낼 부분도 없습니다.
• 정사각형이 아닌 원본은 왜곡될 수 있습니다. 투명 테두리 제거와 여백 추가 단계에서는 직사각형 캔버스를 유지하지만, 이후 모든 결과물을 가로세로 비율 유지 없이 정사각형으로 리사이즈합니다. 비율이 중요하다면 원본을 직접 정사각형으로 준비하세요.
• Safari 고정 탭 참조에 대응하는 파일이 없습니다. 현재 favicon-code.html은 /safari-pinned-tab.svg를 가리키는 rel="mask-icon" 링크를 포함하지만, ZIP에는 이 SVG가 들어 있지 않습니다. 해당 줄을 지우거나 SVG를 별도로 디자인해 배포해야 합니다. 알고 있는 404를 그대로 두지 마세요.
• ICO의 큰 항목은 16픽셀 이미지에서 확대됩니다. JustFavi는 먼저 16×16 래스터를 고른 뒤 이를 바탕으로 ICO 안의 16×16, 32×32, 48×48 항목을 만듭니다. 별도로 생성되는 32×32와 48×48 PNG는 더 큰 처리 원본에서 만들어지므로, ICO의 큰 크기에서 흐릿해지지 않는지 확인하세요.

이 한계 때문에 패키지를 쓸 수 없는 것은 아닙니다. 원본 그림이나 생성된 코드에서 사람이 판단해야 할 지점을 알려 주는 목록입니다.

배포 체크리스트

1. 16×16과 32×32 PNG를 100% 배율로 엽니다. 뭉개지거나 윤곽을 잃는 그림은 더 단순하게 다듬습니다.
2. Apple touch 아이콘을 단색 배경 위에서 확인하고, 브라우저 탭의 프레임에 의존한 그림이 아닌지 봅니다.
3. 마스커블 PNG 2개를 원형과 둥근 사각형 마스크로 미리 봅니다. 핵심 그림은 중앙 안전 영역 안에 둡니다.
4. 매니페스트의 이름, 짧은 이름, 시작 URL, 색상, 아이콘 경로를 실제 사이트에 맞게 수정합니다.
5. 참조된 파일을 모두 업로드합니다. 각 URL을 직접 요청해 HTML 대체 페이지가 아니라 정상 이미지나 매니페스트 응답이 오는지 확인합니다.
6. 직접 만든 safari-pinned-tab.svg를 제공하지 않았다면 누락된 Safari 고정 탭 링크를 제거합니다.
7. 브라우저 개발자 도구에서 아이콘과 매니페스트 요청 오류를 확인합니다. 일반 아이콘과 마스커블 항목이 매니페스트에서 인식되는지도 봅니다.
8. 파비콘 캐시는 오래 남으므로 강력 새로고침이나 비공개 창에서 시험합니다. 이어서 데스크톱 탭, iOS 홈 화면 추가, 사이트에 필요한 설치 화면이나 런처를 확인합니다.

1차 출처

• HTML 표준: icon 링크 타입
• W3C 웹 애플리케이션 매니페스트
• Apple: 웹 애플리케이션 구성