2026 파비콘 크기 가이드: 브랜드에 실제로 필요한 파일

게시일 2026년 8월 7일 · 수정일 2026년 8월 7일 · 7 분 읽기

대부분의 브랜드는 파비콘 파일 하나만 준비해서는 충분하지 않습니다. 2026년에 가장 실용적인 조합은 작은 브라우저 fallback을 담은 favicon.ico, 32x32 PNG, 180x180 Apple touch icon, 그리고 사이트를 설치할 수 있다면 192x192와 512x512 manifest 아이콘입니다. 이 구성이 있어야 같은 로고를 브라우저 탭, Google Search, iOS 홈 화면 저장, 앱처럼 보이는 설치 화면까지 무리 없이 이어갈 수 있습니다.

2026년 7월 6일 기준으로 kitnex.ai와 기존 Kitnex 블로그를 다시 살펴보면 prompt, mockup, 색상, 파일 형식, 상업적 사용, 런칭 체크리스트는 이미 잘 다뤄지고 있었습니다. 하지만 실제 배포 단계, 즉 로고가 확정된 뒤 탭, 검색 결과, 바로가기, 홈 화면에서 보이는 작은 아이콘 세트로 어떻게 나눌지에 대한 설명은 비어 있었습니다.

핵심 요약

• Google Search는 사이트마다 하나의 정사각형 파비콘만 사용하며 최소 8x8, 권장은 48x48 이상입니다.
• iOS 홈 화면 저장은 rel=icon만 보지 않고 apple-touch-icon을 따로 사용합니다.
• 설치 가능한 사이트라면 manifest 아이콘과 필요시 maskable 아이콘이 더 잘 맞습니다.
• 핵심은 파일 수가 아니라 아주 작은 크기에서도 읽히는 심볼을 남기는 것입니다.

파비콘은 어느 크기로 만들어야 할까

Google은 파비콘이 정사각형이어야 하며 최소 8x8 픽셀이어야 한다고 설명하고, 다양한 표면에서 또렷하게 보이도록 48x48보다 큰 파일을 권장합니다. 또한 Google Search는 사이트나 hostname마다 하나의 파비콘만 사용합니다. 그래서 장식적인 변주보다 브랜드가 안정적으로 인식되는 것이 더 중요합니다. 실무에서는 이 조건을 만족한 뒤 브라우저용 fallback, Apple touch icon, manifest 아이콘을 나눠 준비하는 것이 현실적입니다.

• Google 최소 조건: 정사각형, 8x8 이상.
• 실무적 목표: 48x48보다 큰 크기.
• 기본 세트: favicon.ico + Apple touch + manifest.
• 그림 자체는 유지하고 파일 크기만 바꾼다.

왜 파일 하나로는 부족한가

HTML은 여러 rel=icon 파일을 선언할 수 있고, 브라우저는 type과 sizes를 기준으로 더 적절한 버전을 선택합니다. 반면 iOS는 Web Clip에서 rel=icon을 사용하지 않고 apple-touch-icon을 찾습니다. Apple 문서도 152x152, 167x167, 180x180 같은 touch icon 크기를 제시합니다. 같은 브랜드 심볼이라도 사용면마다 파일을 분리해야 하는 이유가 바로 여기에 있습니다.

• 브라우저 탭과 북마크: rel=icon.
• Google Search: 홈에서 읽는 사이트 단위 파비콘.
• iOS 홈 화면 저장: apple-touch-icon.
• 설치형 사이트: manifest와 maskable 아이콘.

대부분의 브랜드가 준비해야 할 파일 세트

favicon.ico에 16x16, 32x32, 48x48 같은 작은 fallback을 넣고, 현대 브라우저용으로 32x32 PNG를 추가한 뒤, iPhone 홈 화면 저장용 180x180 apple-touch-icon과 설치 및 splash용 192x192, 512x512 manifest 아이콘을 준비하면 됩니다. 중요한 것은 무한히 익스포트하는 것이 아니라 실제로 시스템이 읽는 파일만 정확히 만드는 일입니다.

• favicon.ico: 브라우저와 레거시 환경 fallback.
• favicon-32x32.png: 현대 탭용 raster 버전.
• apple-touch-icon.png 180x180: iPhone 홈 화면 저장.
• icon-192x192.png: 흔한 설치 크기.
• icon-512x512.png: 더 큰 시스템 표면용.
• maskable-icon-512x512.png: Android 스타일 크롭에 강한 선택 파일.

maskable 아이콘이 필요한 순간

MDN은 manifest 아이콘에 any, maskable, monochrome 같은 purpose를 줄 수 있다고 설명합니다. web.dev는 중요한 그래픽이 아이콘 너비의 약 40퍼센트 반경 안쪽 안전 영역에 있어야 하며 바깥 10퍼센트는 잘릴 수 있다고 안내합니다. 그래서 전체 워드마크를 그대로 축소하기보다, 작은 화면에 강한 심볼 버전을 따로 준비하는 편이 낫습니다.

• 설치 화면이 중요하면 maskable을 우선 준비.
• 핵심 형태는 중앙 안전 영역에 배치.
• 긴 텍스트, 가는 선, 낮은 대비는 피한다.
• 밝은 배경과 어두운 배경 모두에서 확인한다.

런칭 전에 파비콘 자산을 어떻게 테스트할까

Google은 Googlebot-Image가 파비콘 파일을 읽을 수 있어야 하고 Googlebot이 홈 페이지를 읽을 수 있어야 한다고 말하며, 재크롤링에는 며칠에서 몇 주가 걸릴 수 있다고 덧붙입니다. 따라서 실제 운영에서는 파일 경로를 안정적으로 유지하고, home head에서 올바르게 참조하며, 런칭 후 파일명을 자주 바꾸지 않는 것이 중요합니다. 그다음 실제 브라우저 탭, iPhone 홈 화면 저장, Chrome 또는 Android 설치 흐름, 16~32픽셀 축소 테스트를 순서대로 해보면 됩니다.

• head 태그와 manifest를 함께 점검.
• iPhone 홈 화면 저장을 직접 테스트.
• 설치 가능한 사이트라면 설치 화면도 확인.
• 16~32픽셀을 밝은 UI와 어두운 UI에서 모두 본다.
• 운영 파일명은 되도록 고정한다.

자주 묻는 질문

출처 및 참고자료

• Define a favicon to show in search resultsGoogle Search Central
• Links - HTML StandardWHATWG
• icons - Web app manifestMDN Web Docs
• HTML attribute: relMDN Web Docs
• Configuring Web ApplicationsApple Developer
• Adaptive icon support in PWAs with maskable iconsweb.dev

더 살펴보기