파비콘 크기는 어느 정도가 적당할까요?

브라우저 탭의 최소 파비콘 크기는 16x16픽셀입니다. 하지만 최신 파비콘 설정에서는 여러 크기를 지원합니다. 브라우저용은 16x16, 32x32, 48x48픽셀, Apple 터치 아이콘용은 180x180픽셀, Android/PWA 매니페스트용은 192x192, 512x512픽셀이 있습니다. 512x512픽셀 크기의 원본 이미지를 사용하여 모든 크기의 이미지를 생성해 보세요.

파비콘은 어떤 형식이어야 할까요?

최신 브라우저는 ICO, PNG, SVG 파비콘을 지원합니다. 권장되는 방법은 다음과 같습니다. 최신 브라우저용 SVG 파비콘(무한 확대/축소 가능, 작은 파일 크기), 백업용 32x32 PNG 파비콘, 그리고 180x180 PNG 애플 터치 아이콘을 사용하는 것입니다. 16x16 및 32x32 크기의 아이콘이 포함된 ICO 파일은 구형 브라우저에서 사용됩니다.

브라우저에 파비콘이 표시되지 않는 이유는 무엇인가요?

일반적인 원인으로는 파비콘 파일의 경로가 잘못되었거나, HTML 링크 태그가 없거나 type 속성이 잘못되었거나, 브라우저에 이전 파비콘이 캐시된 경우 등이 있습니다. Ctrl+Shift+R 또는 Cmd+Shift+R 키를 눌러 브라우저가 파비콘을 강제로 다시 로드하도록 시도해 보세요.

ICO 파일이 필요한가요, 아니면 PNG 파일을 사용해도 되나요?

최신 브라우저(크롬, 파이어폭스, 사파리, 엣지)는 모두 PNG 파비콘을 지원합니다. ICO 파일은 구형 IE를 지원하는 경우에만 필요합니다. IE를 대상으로 하지 않는다면 32x32 크기의 PNG 이미지가 브라우저 탭에 완벽하게 작동하므로 ICO 파일은 생략할 수 있습니다.

좋은 파비콘은 어떤 모습이어야 할까요?

좋은 파비콘은 16x16픽셀과 32x32픽셀 크기에서 모두 명확하게 읽히는 로고 또는 브랜드의 단순화된 버전입니다. 작은 글씨, 복잡한 그라데이션, 세밀한 디테일은 작은 크기에서 잘 보이지 않으므로 피해야 합니다. 이니셜 하나, 간단한 아이콘 또는 굵은 도형이 가장 효과적입니다.

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

파비콘(즐겨찾기 아이콘의 줄임말)은 브라우저 탭, 북마크, 모바일 홈 화면에 표시됩니다. 작지만 중요한 브랜드 요소인 파비콘을 모든 브라우저와 기기에서 제대로 구현하려면 생각보다 복잡한 과정을 거쳐야 합니다. 지금부터 그 방법을 자세히 알아보겠습니다.

파비콘이란 무엇인가요?

파비콘은 웹사이트와 관련된 작은 아이콘입니다. 다음과 같이 표시됩니다.

페이지 제목 옆의 브라우저 탭에서
브라우저의 북마크 및 방문 기록에
iOS/Android 홈 화면에서 사용자가 사이트를 저장했을 때 (Apple 터치 아이콘)
PWA 설치 프로그램에서 앱 아이콘으로 표시됩니다.
검색 엔진 결과에 (때때로) 나타납니다.

완벽한 파비콘 설정을 위해서는 이러한 모든 상황을 포괄할 수 있도록 다양한 크기와 형식의 아이콘이 필요합니다.

필수 파비콘 크기

크기	용도
16×16 픽셀	브라우저 탭 (표준)
32×32 픽셀	브라우저 탭(고해상도), 작업 표시줄
48×48 픽셀	윈도우 사이트 아이콘
180×180 픽셀	애플 터치 아이콘 (iOS 홈 화면)
192×192 픽셀	안드로이드 크롬 홈 화면
512×512 픽셀	PWA 시작 화면, 고해상도 컨텍스트
SVG	최신 브라우저 (무한대 확대 가능)

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

로고/아이콘을 최소 512x512 픽셀 크기의 투명 배경을 가진 정사각형 PNG 파일로 생성하거나 내보내세요. 이 파일이 모든 하위 크기 이미지 생성의 원본이 됩니다.

파비콘 친화적인 디자인을 위한 팁:

단순하게 유지하세요 — 복잡한 디자인은 16x16 크기에서 잘 보이지 않습니다.
대비가 높은 배경을 사용하세요 — 밝은 배경에 어두운 아이콘을 사용하거나 그 반대로 하세요.
가는 선은 피하세요 — 크기가 작아지면 보이지 않게 됩니다.
16x16 크기로 테스트 — 디자인 도구에서 축소하여 가독성을 확인하세요

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

각 크기에 맞춰 수동으로 크기를 조정하는 대신 파비콘 생성기를 사용하세요. PicsSizer의 파비콘 생성기는 원본 이미지를 입력받아 완벽한 파비콘 패키지를 생성해 줍니다.

512x512 (또는 그 이상) 크기의 원본 PNG 파일을 업로드하세요.
각 크기에서 어떻게 보이는지 미리 보기
필요한 모든 크기의 파비콘 패키지를 다운로드하세요.

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단계: 웹 앱 매니페스트 생성

안드로이드 홈 화면 아이콘 및 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 파비콘이 이상적입니다.

무한한 확장성 — 어떤 해상도에서도 선명한 화질 제공
매우 작은 파일 크기 — 대개 2KB 미만
다크 모드 지원 — 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>

크롬, 파이어폭스, 사파리 14 이상, 엣지 등 모든 최신 브라우저는 SVG 파비콘을 지원합니다.

일반적인 파비콘 문제 해결

파비콘이 표시되지 않음:

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

파비콘은 데스크톱에서는 표시되지만 모바일에서는 표시되지 않습니다.

iOS의 경우 apple-touch-icon 설정되어 있는지 확인하십시오.
웹 매니페스트가 존재하고 안드로이드용으로 링크되어 있는지 확인하십시오.

업데이트 후에도 이전 파비콘이 계속 표시됩니다:

브라우저는 파비콘을 적극적으로 캐시합니다. 캐시 무효화 쿼리 문자열을 추가하세요: href="/favicon.png?v=2"

파비콘이 흐릿하거나 픽셀화되어 보이는 경우:

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

완벽한 파비콘 체크리스트

PicsSizer의 파비콘 생성기를 사용하여 단일 이미지에서 전체 파비콘 패키지를 생성하거나, 파비콘 크기 가이드를 참조하여 전체 크기를 확인하세요.

크기 조정

전환하다

압박 붕대

향상 및 분석