파비콘 만드는 방법: 모든 브라우저와 기기를 위한 완벽 가이드

파비콘(favicon, "favorites icon"의 줄임말)은 브라우저 탭, 북마크, 모바일 홈 화면에 표시됩니다. 작지만 중요한 브랜딩 요소이며, 모든 브라우저와 기기에서 제대로 구현하려면 생각보다 손이 많이 갑니다. 정확한 구현 방법을 알아보겠습니다.

파비콘이란?

파비콘은 웹사이트와 연결된 작은 아이콘입니다. 다음과 같은 곳에 표시됩니다.

• 페이지 제목 옆 브라우저 탭
• 브라우저의 북마크와 방문 기록
• 사용자가 사이트를 저장할 때 iOS/Android 홈 화면 (Apple 터치 아이콘)
• PWA 설치 시 앱 아이콘
• 검색 엔진 결과 (경우에 따라)

이 모든 상황을 처리하려면 완전한 파비콘 설정에 여러 크기와 형식이 필요합니다.

필요한 파비콘 크기

1단계: 고해상도 원본 이미지로 시작하기

로고나 아이콘을 최소 512×512 픽셀의 정사각형 PNG로, 배경을 투명하게 만들어 준비하세요. 이 이미지가 더 작은 모든 크기를 생성할 원본이 됩니다.

파비콘에 적합한 디자인을 위한 팁입니다.

• 단순하게 유지하세요 — 복잡한 디자인은 16×16에서 잘 보이지 않습니다
• 높은 대비를 사용하세요 — 밝은 배경에 어두운 아이콘, 또는 그 반대로
• 얇은 선은 피하세요 — 작은 크기에서는 사라집니다
• 16×16에서 테스트하세요 — 디자인 도구에서 축소해 가독성을 확인하세요

2단계: 모든 파비콘 크기 생성하기

필요한 각 크기로 수동으로 조정하는 대신, 파비콘 생성기를 사용하세요. PicsSizer의 파비콘 생성기는 원본 이미지를 받아 완전한 패키지를 만들어 줍니다.

1. 512×512 (또는 그 이상)의 원본 PNG를 업로드하세요
2. 각 크기에서 어떻게 보이는지 미리 보세요
3. 필요한 모든 크기가 담긴 전체 파비콘 패키지를 다운로드하세요

3단계: HTML 추가하기

HTML의 <head>에 다음 태그를 넣으세요.

<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />

4단계: 웹 앱 매니페스트 만들기

Android 홈 화면 아이콘과 PWA 지원을 위해 site.webmanifest 파일을 만드세요.

{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVG 파비콘 방식

최신 브라우저에는 SVG 파비콘이 이상적입니다.

• 무한 확대/축소 가능 — 어떤 해상도에서도 선명합니다
• 작은 파일 크기 — 대개 2 KB 미만입니다
• 다크 모드 지원 — SVG 내부에 CSS 미디어 쿼리를 사용할 수 있습니다

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

SVG 내부에 다크 모드용 미디어 쿼리를 넣은 예시입니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

모든 최신 브라우저(Chrome, Firefox, Safari 14+, Edge)는 SVG 파비콘을 지원합니다.

파비콘 관련 흔한 문제 해결하기

파비콘이 표시되지 않을 때:

• href에 지정된 경로에 파일이 있는지 확인하세요
• 브라우저를 강력 새로고침하세요 (Ctrl+Shift+R / Cmd+Shift+R)
• 브라우저 개발자 도구의 네트워크 탭에서 파비콘 요청의 404 오류를 확인하세요

파비콘이 데스크톱에서는 보이지만 모바일에서는 보이지 않을 때:

• iOS를 위해 apple-touch-icon이 설정되어 있는지 확인하세요
• Android를 위해 웹 매니페스트가 존재하고 연결되어 있는지 확인하세요

업데이트 후에도 이전 파비콘이 계속 보일 때:

• 브라우저는 파비콘을 강하게 캐싱합니다. 캐시 방지용 쿼리 문자열을 추가하세요: href="/favicon.png?v=2"

파비콘이 흐릿하거나 깨져 보일 때:

• 더 높은 해상도의 원본 이미지(최소 512×512)로 다시 생성하세요
• 각 상황에 맞는 올바른 크기를 사용하고 있는지 확인하세요

완전한 파비콘 체크리스트

• 512×512 px 원본 이미지 (투명 PNG)
• favicon.ico (레거시 IE용, ICO 내부에 16×16 + 32×32 포함)
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png (180×180)
• android-chrome-192x192.png
• android-chrome-512x512.png
• favicon.svg (선택 사항이지만 권장)
• site.webmanifest
• <head> 안의 HTML <link> 태그

이미지 한 장으로 전체 패키지를 생성하려면 PicsSizer의 파비콘 생성기를 사용하거나, 전체 참고 자료는 파비콘 크기 가이드를 확인하세요.