2026년에 필요한 파비콘 크기는? 이상적인 구성

2026년의 이상적인 파비콘 구성은 다음과 같습니다. 16, 32, 48px 이미지가 들어 있는 favicon.ico, (Google 검색용) 96x96 PNG, 선택 사항인 SVG 파비콘, 180x180 apple-touch-icon.png, 그리고 웹 앱 매니페스트에 선언하는 192x192 및 512x512 PNG(마스커블 512 포함)입니다. Windows 타일과 구형 Apple 크기는 아주 오래된 기기를 꼭 지원해야 할 때만 필요합니다. 아래에서 그 이유를 크기 표, 바로 사용할 수 있는 HTML, 흔한 실수와 함께 설명합니다.

예전의 파비콘 환경은 복잡했습니다. 브라우저와 운영체제마다 각자 다른 크기를 요구해서 악명 높은 20줄짜리 <head> 블록이 생겨났죠. 오늘날 그 대부분은 더 이상 필요하지 않습니다. 최신 브라우저는 잘 만든 아이콘 하나를 알아서 확대·축소하고, iOS는 한 가지 크기만 원하며, Android는 매니페스트를 읽습니다. 이 글에서는 정말 필요한 것과 있으면 좋은 정도의 것을 구분해 드립니다.

짧은 답: 이상적인 파비콘 파일 구성

• 사이트 루트에 둘 favicon.ico(16, 32, 48px를 한 파일에 포함). 브라우저, 피드 리더, 여러 도구가 지금도 /favicon.ico를 자동으로 요청합니다.
• favicon.svg(선택 사항이지만 권장): 어떤 크기에서도 선명하게 표시되며 다크 모드를 지원합니다.
• 명시적 대체 파일로 쓸 PNG 16x16, 32x32, 96x96. 96px 버전은 48px의 배수를 요구하는 Google 검색에 도움이 됩니다.
• 180x180 크기의 불투명한(투명도 없는) apple-touch-icon.png.
• manifest.json에 넣을 192x192 및 512x512 PNG와 Android용 마스커블 512x512 아이콘.
• 모바일에서 브라우저 UI 색상을 지정하는 theme-color 메타 태그.
• browserconfig.xml과 함께 쓰는 Windows 타일(70, 150, 310px)은 구형 Windows와 IE11 고정 사이트에만 필요합니다.

파비콘 크기 표: 용도, 파일명, 우선순위

이 표를 체크리스트로 활용하세요. "필수"는 없으면 일반적인 사이트가 깨져 보이거나 미완성처럼 보인다는 뜻이고, "권장"은 품질이 뚜렷이 좋아진다는 뜻이며, "선택"은 특수하거나 구형 환경용이라는 뜻입니다.

favicon.ico: 한 파일에 16, 32, 48px

ICO 파일은 여러 비트맵을 담는 컨테이너입니다. 좋은 favicon.ico에는 16x16, 32x32, 48x48 이미지가 모두 들어 있어서 브라우저나 OS가 가장 알맞은 것을 고를 수 있습니다. 도메인 루트(https://example.com/favicon.ico)에 두세요. HTML이 다른 곳을 가리키더라도 많은 크롤러, RSS 리더, 구형 브라우저가 여전히 이 URL을 그대로 요청하므로, 파일이 있으면 로그에 404 오류가 쌓이는 것을 막을 수 있습니다.

PNG 파일의 확장자만 .ico로 바꾸지 마세요. 대부분의 브라우저는 받아 주지만 일부 도구는 거부하며, 멀티 해상도의 이점도 사라집니다. 진짜 ICO로 내보내세요.

PNG 파비콘: 16, 32, 96px

명시적인 sizes가 있는 PNG 링크를 쓰면 브라우저가 ICO를 분석하지 않고도 가장 알맞은 비트맵을 고를 수 있습니다. 실제로는 32x32가 고해상도 탭을 담당하고, 16x16은 요즘 거의 중복입니다. 96x96 크기는 추가할 가치가 있습니다. Google 검색은 결과 옆에 파비콘을 표시하며, 크기가 48px의 배수(48x48, 96x96, 144x144 등)인 정사각형 아이콘을 요구하기 때문입니다. 모바일 결과용으로 축소할 때 96px 파일은 48px 파일보다 더 선명한 원본이 됩니다.

디자인 팁: 16px에서는 세부 요소가 사라집니다. 굵고 단순한 형태, 높은 대비를 쓰고 텍스트는 거의 또는 전혀 넣지 마세요. 내보내기 전에 MakeFav 에디터에서 아이콘을 다듬고 미리 볼 수 있습니다.

SVG 파비콘과 다크 모드

SVG 파비콘은 어떤 화면 밀도에서도 선명하게 유지되는 아주 작은 단일 파일입니다. Chromium 기반 브라우저와 Firefox가 지원합니다. Safari의 지원은 지금까지 제한적이었으므로 SVG에만 의존하지 말고 ICO와 PNG 대체 파일을 유지하세요.

가장 큰 장점은 테마 적용입니다. SVG에는 CSS를 넣을 수 있으므로 prefers-color-scheme로 사용자의 색상 구성표에 맞게 아이콘을 바꿀 수 있습니다.

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

이 미디어 쿼리는 탭 바가 사용하는 브라우저 또는 OS 테마를 반영한다는 점에 유의하세요. 웹사이트 자체의 테마 전환 버튼은 따라가지 않습니다.

알려진 특이 사항이 하나 있습니다. ICO와 SVG를 함께 나열하면 Chrome이 ICO를 선택할 수 있습니다. ICO를 sizes="32x32"로 선언하고 SVG를 그 뒤에 나열하면 아래 코드처럼 Chrome이 SVG를 우선 사용합니다.

Apple touch icon: 180x180과 구형 크기

사용자가 사이트를 iOS 또는 iPadOS 홈 화면에 추가하면 Safari는 apple-touch-icon을 사용합니다. 요즘은 180x180px PNG 하나면 충분합니다. iOS가 구형 기기와 iPad에 맞게 알아서 축소합니다. 파일 이름은 apple-touch-icon.png로 하고 루트에 두세요. link 태그가 없어도 iOS는 기본적으로 이 파일을 찾습니다.

Apple 아이콘 규칙:

• 투명도 금지. iOS는 투명한 픽셀을 검은색으로 채우기 때문에 투명한 로고가 검은 덩어리로 바뀌는 일이 많습니다. 단색 배경을 추가하세요.
• 둥근 모서리 금지. iOS가 자체 둥근 마스크를 적용합니다. 꽉 찬 정사각형을 제공하세요.
• 모서리가 잘리므로 핵심 요소는 가장자리에서 떨어뜨려 두세요.

구형 크기(57, 72, 76, 114, 120, 144, 152, 167)는 언제 필요할까요? iOS 6 이하를 지원해야 하거나 iPad Pro(167px)와 iPad(152px)에서 기기별로 정확한 픽셀 제어를 원할 때뿐입니다. 2026년의 거의 모든 사이트에서는 180x180 파일 하나로 충분합니다. 아래의 최대 호환 설정에는 완성도를 위해 몇 가지를 포함했습니다.

Android 및 PWA 아이콘: 192, 512, 마스커블

Android의 Chrome과 PWA를 지원하는 다른 브라우저는 <link rel="icon">가 아니라 웹 앱 매니페스트에서 아이콘을 읽습니다. 설치 가능하게 하려면 최소한 192x192와 512x512 PNG가 필요합니다. 192px 아이콘은 홈 화면과 앱 런처에, 512px 아이콘은 스플래시 화면과 설치 대화상자에 사용됩니다.

마스커블 아이콘과 안전 영역

Android 적응형 아이콘은 기기에 따라 원형, 스쿼클 또는 다른 모양으로 잘릴 수 있습니다. 마스커블 아이콘은 안전하게 잘리도록 설계된 아이콘으로, 중요한 내용이 안전 영역, 즉 이미지의 80% 지름을 가진 중앙의 원(반지름이 한 변의 40%) 안에 있어야 합니다. 512x512 파일이라면 로고를 지름 약 410px의 원 안에 두고, 마스크를 적용한 뒤 빈틈이 보이지 않도록 배경색을 네 가장자리 끝까지 채운다는 뜻입니다.

마스커블 아이콘은 "purpose": "maskable"을 지정해 별도 항목으로 선언하세요. 한 파일에 "any maskable"을 쓰는 것은 피하세요. 마스킹에 필요한 여백이 마스크 없이 표시될 때는 너무 작아 보입니다.

manifest.json 예시

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

이 파일은 application/manifest+json(또는 application/json)으로 제공하고, 모든 페이지에서 <link rel="manifest" href="/manifest.json">로 연결하세요. 일부 프로젝트에서는 site.webmanifest라는 이름을 쓰는데, 파일 이름은 중요하지 않고 중요한 것은 링크입니다.

Windows 타일과 browserconfig.xml

Windows 8.1과 10에서는 사용자가 사이트를 시작 메뉴에 고정할 수 있으며, IE11과 구형 Edge는 browserconfig.xml에서 타일 이미지를 읽습니다. 일반적인 크기는 70x70(작게), 150x150(중간), 310x150(넓게), 310x310(크게)입니다. Chromium 기반 Edge는 대신 매니페스트와 일반 파비콘을 사용하므로 이는 구형 기능입니다. 기업 환경처럼 사용자 중에 구형 Windows 환경이 여전히 있을 때만 포함하세요.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: 브라우저 UI 색상 지정

theme-color 메타 태그는 모바일 브라우저(및 일부 데스크톱 브라우저)에 주소 표시줄이나 제목 표시줄에 사용할 색상을 알려 줍니다. 파비콘은 아니지만 같은 브랜딩 세트에 속합니다. 라이트 모드와 다크 모드에 각각 다른 값을 지정할 수 있습니다.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

최소 최신 구성 vs. 최대 호환 구성

최소 최신 구성 (대부분의 사이트에 권장)

파일 다섯 개로 실제 사용 환경의 99% 이상을 커버합니다. favicon.ico, favicon.svg, apple-touch-icon.png(180x180), 그리고 매니페스트 아이콘 두 개(192, 512)입니다. Google 검색 노출이 중요하다면 96x96 PNG를, PWA를 배포한다면 마스커블 아이콘을 추가하세요.

<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.json">

최대 호환 구성

폭넓은 사용자층이나 기업 사용자를 대상으로 하거나 가능한 모든 클라이언트를 커버하고 싶을 때 선택하세요. 명시적인 PNG 크기, 구형 Apple 크기, Windows 타일, 테마 색상이 추가됩니다.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

/로 시작하는 루트 상대 경로에 주목하세요. 페이지 깊이와 관계없이 동작하며, 이는 가장 흔한 실수로 이어집니다.

흔한 파비콘 실수와 해결 방법

1. 잘못된 경로

href="favicon.ico" 같은 링크는 현재 URL을 기준으로 해석되므로 /에서는 동작하지만 /blog/post/에서는 깨집니다. 루트 상대 경로(/favicon.ico)나 절대 URL을 사용하세요. 또한 파일이 실제로 존재하는지 확인하세요. 각 URL을 브라우저에서 직접 열어 404 페이지나 로그인 화면으로 리디렉션되지 않고 HTTP 200을 반환하는지 확인합니다.

2. sizes 속성 누락 또는 오류

sizes가 없으면 브라우저는 아이콘을 검사하기 위해 내려받아야 하고 잘못된 것을 고를 수도 있습니다. PNG 링크에는 항상 sizes를 선언하고 실제 픽셀 크기와 일치하는지 확인하세요. 32x32로 표기했지만 실제로는 64x64인 파일은 일관되지 않은 결과를 낳습니다.

3. 과도한 캐싱

브라우저는 파비콘을 오랫동안, 종종 페이지 캐시와 별개로 캐시합니다. 리브랜딩 후에도 이전 아이콘이 며칠씩 남아 있을 수 있습니다. 파일 이름을 바꾸거나 버전 쿼리 문자열(/favicon.ico?v=2)을 추가하고 link 태그를 업데이트하세요. 강력 새로 고침으로는 탭 아이콘이 갱신되지 않는 경우가 많으며, 아이콘 URL을 직접 열어 새로 고치면 대개 해결됩니다.

4. 정사각형이 아닌 이미지

파비콘은 정사각형이어야 합니다. 직사각형 로고는 늘어나거나 잘리거나 예측할 수 없는 레터박스가 생깁니다. 가로로 긴 워드마크를 줄이는 대신 이니셜이나 심볼 같은 전용 정사각형 마크를 디자인하세요.

5. 투명한 Apple touch icon이 검게 변함

iOS는 투명한 부분을 검은색으로 채웁니다. 180x180 아이콘에는 불투명한 배경을 주고 모서리를 미리 둥글게 처리하지 마세요.

6. 안전 영역이 없는 마스커블 아이콘

로고가 마스커블 아이콘의 가장자리에 닿으면 Android가 잘라 버립니다. 중앙의 80% 원 안에 두고 전체 캔버스를 배경색으로 채우세요.

7. 크롤러의 아이콘 접근 차단

robots.txt가 파비콘 경로를 차단하면 Google이 가져올 수 없어 검색 결과에 일반 지구본 아이콘이 표시됩니다. 또한 Google은 페이지와 같은 호스트의 파비콘을 필요로 하고 가끔씩만 갱신하므로, 변경 사항이 반영되기까지 며칠에서 몇 주가 걸릴 수 있다는 점도 기억하세요.

8. 매니페스트 링크나 purpose 누락

링크되지 않았거나 192px, 512px 아이콘이 없는 매니페스트는 Chrome의 설치 안내를 막습니다. 브라우저 개발자 도구의 Application 탭에서 검증하세요.

클릭 한 번으로 전체 세트 생성

이미지 편집기에서 십여 개의 파일을 직접 만들고 ICO로 변환한 뒤 매니페스트까지 작성하는 일은 번거롭고 실수하기 쉽습니다. MakeFav는 이미지, 텍스트 또는 이모지 하나로 위의 모든 파일을 생성합니다. 멀티 사이즈 favicon.ico, PNG, SVG, Apple touch icon, 192/512 PNG, 마스커블 아이콘, Windows 타일, manifest.json, browserconfig.xml에 바로 붙여 넣을 수 있는 HTML 스니펫까지 하나의 ZIP 파일로 내려받을 수 있습니다. 에디터에서 배경, 여백, 모양을 세밀하게 조정하고, 파비콘 검사기로 기존 사이트를 확인하며, 개발자 리소스를 통해 생성을 자동화할 수 있습니다.

배포 체크리스트

1. 모든 파일을 사이트 루트에 업로드합니다.
2. HTML 스니펫을 모든 페이지(또는 공통 레이아웃)의 <head>에 붙여 넣습니다.
3. 경로가 루트 상대 경로이고 HTTP 200을 반환하는지 확인합니다.
4. 라이트 모드와 다크 모드, iOS 홈 화면 설치, Android 설치를 확인합니다.
5. 검사기를 실행해 누락되었거나 맞지 않는 크기를 찾아냅니다.
6. 이전 아이콘을 교체했다면 버전 문자열로 캐시를 무효화합니다.

자주 묻는 질문

2026년에도 favicon.ico가 필요한가요?

네. 최신 브라우저는 PNG와 SVG를 받아들이지만, 많은 크롤러, 피드 리더, 이메일 클라이언트, 구형 브라우저가 여전히 /favicon.ico를 직접 요청합니다. 16, 32, 48px 이미지가 들어 있는 멀티 사이즈 ICO는 용량이 작고 아이콘 누락과 404 오류를 막아 줍니다.

Google 검색용 파비콘은 어떤 크기여야 하나요?

Google은 크기가 48px의 배수인 정사각형 파비콘을 요구하며 최소 48x48입니다. 96x96 PNG가 안전한 선택이고 SVG도 지원됩니다. 또한 Google이 파일을 크롤링할 수 있어야 하므로 robots.txt에서 차단하지 마세요. 업데이트가 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다.

Apple touch icon은 180x180이면 충분한가요?

거의 모든 사이트에서는 그렇습니다. iOS와 iPadOS는 180x180 PNG를 현재의 모든 기기에 맞게 축소합니다. 구형 크기(57~152px)는 아주 오래된 iOS 버전에서만 의미가 있습니다. 아이콘이 검게 변하지 않도록 불투명한 배경을 사용하세요.

마스커블 아이콘이란 무엇이며 꼭 필요한가요?

마스커블 아이콘은 Android의 적응형 아이콘 모양에 맞게 설계된 512x512 PNG입니다. 중요한 내용은 중앙의 지름 80% 원 안에 있고 배경은 정사각형 전체를 채웁니다. 설치 가능한 PWA를 제공할 때만 필요하지만, 아이콘이 흰 원 안에 들어가 있는 대신 네이티브 앱처럼 보이게 해 줍니다.

아이콘을 바꿨는데 왜 예전 파비콘이 계속 보이나요?

브라우저는 파비콘을 별도로, 그리고 오랫동안 캐시합니다. 파일 이름을 바꾸거나 ?v=2 같은 버전 쿼리 문자열을 추가하고 link 태그를 업데이트한 다음, 아이콘 URL을 직접 열어 새로 고치세요. 검색 엔진이 자체 사본을 갱신하는 데는 더 오래 걸릴 수 있습니다.