파비콘 사이즈 체크리스트: 요즘 사이트에 필요한 최소 세트

최소 세트와 파일마다 필요한 이유

예전 파비콘 생성기는 지금은 의미가 없는 브라우저와 기기를 위해 수십 개의 파일을 만들어 냈습니다. 요즘 사이트는 이미지 파일 여섯 개면 됩니다. 각각이 서로 다른 클라이언트를 맡기 때문입니다. HTML을 읽지 않고 /favicon.ico를 바로 요청하는 곳을 위한 ICO, 벡터 탭 아이콘을 그릴 수 있는 브라우저를 위한 SVG, iOS 홈 화면을 위한 애플 터치 아이콘, 그리고 웹 앱 매니페스트를 위한 PNG 두 가지 크기와 마스커블 아이콘입니다.

아래 표가 그 세트입니다. 첫 열은 이 글에서 쓰는 파일명이며, 태그와 매니페스트가 가리키기만 하면 어떤 이름이든 상관없습니다.

파일	크기	누가 요청하나
favicon.ico	한 파일 안에 16, 32, 48px	레거시 브라우저, 크롤러, /favicon.ico를 직접 요청하는 도구
icon.svg	벡터(viewBox 32 x 32)	SVG 탭 아이콘을 지원하는 브라우저. 어떤 해상도에서도 선명하고 다크 테마를 따를 수 있음
apple-touch-icon.png	180 x 180, 불투명	iOS·iPadOS 홈 화면 바로가기
icon-192.png	192 x 192	웹 앱 매니페스트. 설치 가능한 앱에 필요한 두 크기 중 작은 쪽
icon-512.png	512 x 512	웹 앱 매니페스트. 설치 안내와 스플래시 화면
icon-maskable-512.png	512 x 512, 가장자리까지 채움	안드로이드 적응형 모양. 시스템이 원, 스쿼클, 사각형으로 잘라 냄

favicon.ico: 실패하지 않는 폴백

페이지에 아이콘 링크가 없으면 브라우저는 사이트 루트의 /favicon.ico를 요청하고, 많은 크롤러와 링크 미리보기 수집기, 피드 리더도 마찬가지입니다. 그 자리에 파일을 두면 로그에 쌓이던 404가 사라지고 이런 클라이언트들도 보여 줄 이미지가 생깁니다. ICO는 컨테이너 형식입니다. 6바이트 헤더, 이미지마다 16바이트짜리 디렉터리 항목, 그리고 이미지 본체가 이어집니다. 이미지는 PNG여도 되고 지금의 모든 브라우저가 읽을 수 있으므로, 한 파일에 16, 32, 48픽셀 버전을 담을 수 있습니다.

크기는 임의로 정한 것이 아닙니다. 브라우저 탭은 16 CSS 픽셀로 그리므로 고밀도 화면에는 물리 픽셀 32개가 필요합니다. ICO에는 16·32·48픽셀 이미지가 그대로 들어가지만, 이 사이트의 파비콘 생성기는 의도한 탭 크기를 나타내려고 ICO 링크에 sizes="32x32"을 선언합니다. 16픽셀 이미지에는 세부 묘사를 담을 수 없습니다. 굵은 도형 하나나 글자 하나로 만들고 실제 크기로 확인하세요.

prefers-color-scheme 다크 모드를 지원하는 SVG 아이콘

SVG 아이콘은 어떤 크기에서도 선명한 작은 파일 하나이고, CSS를 담을 수 있습니다. SVG 탭 아이콘을 그리는 브라우저에서는 SVG 안의 prefers-color-scheme 미디어 쿼리가 브라우저가 쓰는 테마에 반응하므로, 어두운 탭 줄 위에서 어두운 로고가 색을 바꿀 수 있습니다. 실제로 겪는 문제를 푸는 방법입니다. 밝은 탭에서는 보기 좋던 남색 아이콘이 어두운 탭에서는 사라질 수 있습니다.

SVG만 단독으로 쓰지는 마세요. SVG 아이콘 지원은 보편적이지 않고, iOS나 매니페스트에는 아무 효과가 없으며, 페이지가 링크해도 SVG를 무시하는 클라이언트가 있습니다. ICO를 폴백으로 두고 SVG는 그 뒤에 나열하세요. SVG는 단순하게 유지합니다. 외부 글꼴이나 이미지, 스크립트는 쓰지 않고, 도형은 viewBox 안에 그려서 잘리지 않게 합니다. 이 사이트의 생성기는 원본이 SVG일 때 그 파일을 favicon.svg로 그대로 복사하고 링크 태그도 추가합니다. 래스터 원본에는 이 파일이 생기지 않습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0b5fff; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0b5fff; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="7"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

apple-touch-icon: 180 x 180, 투명 배경 금지

사용자가 페이지를 iOS 홈 화면에 추가하면 Safari는 rel="apple-touch-icon"의 이미지를 사용합니다. 현재 아이폰에는 180 x 180픽셀이 맞는 크기이고, 다른 기기에는 시스템이 크기를 맞춥니다. 지켜야 할 것은 두 가지입니다. 첫째, 불투명하게 만드세요. 투명 픽셀은 보통 검은색으로 그려지므로, 배경이 투명한 로고는 어두운 타일이 되어 의도와 달라지기 쉽습니다. 정사각형 전체를 브랜드 색으로 채우세요. 둘째, 모서리를 직접 둥글게 만들지 마세요. iOS가 자체 마스크를 적용하므로 미리 둥글린 아이콘은 모서리에 어두운 부분이 보이거나 테두리가 겹쳐 보입니다.

여백도 주세요. iOS가 모서리를 잘라 내므로 로고는 중앙의 80퍼센트 정도 안에 두는 것이 안전합니다. 홈 화면 아이콘은 바로가기를 만들 때 저장된 사본이므로, 서버의 파일을 바꿔도 사용자가 이미 추가한 바로가기는 갱신되지 않습니다.

매니페스트 아이콘: 192, 512, 그리고 마스커블 안전 영역

웹 앱 매니페스트는 사이트를 설치하거나 안드로이드·데스크톱 홈 화면에 추가할 때 쓰는 아이콘을 나열합니다. Chromium 기반 브라우저는 설치 가능 조건으로 192 x 192와 512 x 512 아이콘을 기대하며, 이 사이트의 웹 매니페스트 검증기도 둘을 모두 찾기 전까지 설치 체크리스트 항목을 빨간색으로 표시합니다. 192 버전은 런처에, 512 버전은 설치 안내와 스플래시 화면에 쓰입니다.

마스커블 아이콘은 "purpose": "maskable"을 붙인 세 번째 파일입니다. 플랫폼이 기기에서 쓰는 모양으로 잘라 내므로 가장자리까지 꽉 채워 디자인합니다. 배경색은 모든 모서리까지 이어지고, 중요한 그림은 W3C 웹 앱 매니페스트 명세가 정한 안전 영역, 즉 아이콘 한 변의 40퍼센트를 반지름으로 하는 중앙의 원 안에 둡니다. 512픽셀 파일이라면 지름 410px(반지름 204.8)의 원이고, 가장 가까운 모서리까지 51px의 여백이 남습니다. 잘리면 안 되는 정사각형 로고는 중앙의 약 290 x 290px 안에 들어가야 합니다. 192픽셀 버전의 수치는 154px와 109px입니다. 이 사이트의 생성기는 정사각형 그림을 약 290 x 290px로 줄여 이 중앙 안전 영역 원(지름은 아이콘 한 변의 80%) 안에 맞춘 별도의 512픽셀 마스커블 파일을 만듭니다. 원형이 아닌 그림은 배포 전에 원형 안전 영역에서도 잘리지 않는지 확인하세요.

두 용도는 별도의 파일로 만드는 편이 좋습니다. "purpose": "any maskable" 하나로 표시한 파일도 검증기는 받아들이지만, 안전 영역을 가득 채운 그림은 마스크 없이 표시될 때 답답해 보이고, 마스크 없는 표시용으로 디자인한 그림은 마스크가 적용되면 잘립니다. purpose가 없는 아이콘은 any로 취급됩니다.

정확한 link 태그

head에 다섯 줄이면 위 내용이 모두 처리됩니다. ICO 링크의 sizes 속성은 32 x 32 탭 크기를 선언하며 생성기의 출력과 같습니다. ICO 파일에는 16·32·48픽셀 이미지가 그대로 들어갈 수 있습니다. ICO를 SVG보다 앞에 두세요. SVG를 이해하는 브라우저는 SVG를 쓰고 나머지는 ICO로 돌아갑니다. theme-color는 모바일과 설치된 앱에서 브라우저 툴바의 색을 정합니다.

링크 태그는 홈 화면뿐 아니라 모든 페이지의 head에 있어야 합니다. 사람들은 내부 페이지로 들어오기도 하기 때문입니다. 슬래시로 시작하는 경로는 사이트 루트 기준으로 해석되어 중첩된 경로에서도 동작하지만, favicon.ico 같은 상대 경로는 페이지가 /blog/post/에서 제공되는 순간 깨집니다.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0b5fff">

최소한의 유효한 매니페스트

이 매니페스트는 검증기가 앱을 설치 가능하다고 판단하는 데 필요한 요소를 갖추고 있습니다. 이름, start_url, 설치 가능한 display 값, 두 가지 아이콘 크기입니다. short_name은 홈 화면 아이콘 아래에 표시되는 이름이며, 12자를 넘으면 검증기가 경고합니다. purpose는 any, maskable, monochrome을 공백으로 구분한 목록이고, round 같은 다른 토큰은 오류입니다. /manifest.webmanifest로 저장해 검증하면 오류도 경고도 없습니다.

생성된 결과는 믿기 전에 확인하세요. 이 사이트의 파비콘 생성기는 name, short_name, /로 설정한 id와 start_url, 색상, display, 아이콘 세 개가 든 매니페스트를 만듭니다. 192·512픽셀 아이콘에는 "purpose": "any"가, 별도의 512픽셀 마스커블 아이콘에는 "purpose": "maskable"이 들어가며, 매니페스트 검증기는 이를 설치 가능으로 판정합니다. 앱이 사이트 루트가 아닌 경로에 있다면 start_url과 id를 실제 진입 경로와 식별자에 맞게 바꾸세요.

매니페스트의 아이콘 src는 페이지가 아니라 매니페스트 파일 자신의 URL을 기준으로 해석됩니다. 매니페스트가 하위 폴더에 있다면 슬래시로 시작하는 절대 경로가 뜻밖의 문제를 막아 줍니다.

{
  "id": "/",
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0b5fff",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

브라우저에 옛 아이콘이 계속 보이는 이유

파비콘은 사이트의 어떤 자원보다 끈질기게 캐시됩니다. 브라우저는 일반 페이지 캐시와 별개의 저장소에 파비콘을 보관하므로, 페이지를 강력 새로고침해도 갱신되지 않을 수 있습니다. 북마크, 고정 탭, 방문 기록에 쓰이는 아이콘은 또 따로 저장되기도 합니다. 구글 검색도 자체 사본을 가지고 있고 자기 일정에 따라 갱신하며, 보통 며칠, 길게는 몇 주 뒤에 바뀝니다.

확실한 해결책은 URL을 바꾸는 것입니다. 파일 이름을 바꾸거나(favicon-v2.ico) 버전 쿼리(/favicon.ico?v=2)를 붙이고 link 태그를 수정하세요. 고정된 이름으로 제공하는 파일에는 1년 대신 하루 정도의 적당한 Cache-Control을 주어 교체본이 퍼지게 하세요. 파일명에 콘텐츠 해시가 들어간다면 내용이 바뀔 때 이름도 바뀌므로 immutable을 붙인 긴 수명도 괜찮습니다.

변경을 확인하려면 새 URL을 시크릿 창에서 직접 열고, 옛 아이콘을 본 적 없는 프로필에서 탭을 확인하세요. 거기서 올바른 이미지가 보이면 파일은 맞고 남은 문제는 캐시입니다.

흔한 실수와 마지막 체크리스트

깨진 파비콘의 대부분은 몇 가지 원인에서 나오고, 모두 1분이면 확인할 수 있습니다.

512픽셀 PNG 하나만 두고 브라우저가 줄이게 하는 경우. 작은 크기가 흐릿해집니다. 16, 32픽셀 이미지를 따로 내보내거나 생성기의 단계적 축소를 쓰세요.
배경이 투명한 apple-touch-icon. iOS에서 검은색이 됩니다. 단색으로 채우세요.
로고가 가장자리까지 닿아 안드로이드에서 잘리는 마스커블 아이콘. 그림은 반지름 40퍼센트 원 안에 두세요.
start_url이 없거나 아이콘이 192·512픽셀에 못 미치는 매니페스트. 검증기가 설치할 수 없다고 보고합니다.
리디렉션되거나 404를 반환하거나 로그인 뒤에 있거나, 아이콘을 가져오는 크롤러에 robots.txt로 막혀 있는 아이콘 파일.
잘못된 type 값. 실제로는 JPEG인 파일에 type="image/png"를 쓰거나, SVG에 type="image/svg+xml"을 빠뜨리는 경우.
홈 화면에만 있는 link 태그, 또는 중첩된 URL에서 깨지는 상대 경로.
16픽셀에서 읽을 수 없는 세부 묘사나 작은 글자가 든 로고. 작은 크기용으로 마크를 단순화하세요.

직접 해보기

파비콘 생성기이미지 하나로 모든 파비콘 크기와 HTML 태그를.웹 앱 매니페스트 검사기PWA 매니페스트가 설치 가능한지 확인합니다.