가장 좋은 파비콘 크기는 무엇인가요?

가장 중요한 크기는 브라우저용 32x32, Apple Touch Icon용 180x180, Android용 192x192입니다. 최상의 호환성을 위해 모든 표준 크기를 포함하세요.

SVG를 파비콘으로 사용할 수 있나요?

네, 최신 브라우저는 로 SVG 파비콘을 지원합니다. 다만 오래된 브라우저를 위해 ICO/PNG 대체도 제공해야 합니다.

파비콘이 SEO에 영향을 미치나요?

파비콘이 검색 순위에 직접 영향을 미치지는 않지만, 브랜드 인지도, 검색 결과 클릭률, 사용자 신뢰도를 높여 간접적으로 SEO에 도움이 됩니다.

웹사이트 파비콘 만들기 — 완벽 가이드 (2026)

파비콘이란 무엇이며 왜 중요한가

파비콘(Favicon)은 "favorite icon"의 줄임말로, 브라우저 탭, 북마크 목록, 검색 결과 등에 표시되는 작은 아이콘입니다. 1999년 Internet Explorer 5에서 처음 도입된 이후, 파비콘은 웹사이트의 시각적 정체성을 나타내는 핵심 요소로 자리 잡았습니다.

파비콘이 중요한 이유는 다음과 같습니다.

브랜드 인지도: 사용자가 여러 탭을 열어놓았을 때 파비콘은 웹사이트를 빠르게 식별하는 유일한 수단입니다
사용자 신뢰도: 파비콘이 없는 웹사이트는 미완성이거나 신뢰할 수 없다는 인상을 줄 수 있습니다
검색 결과 노출: Google 모바일 검색 결과에서 파비콘이 사이트 이름 옆에 표시되어 클릭률에 영향을 줍니다
북마크 식별: 사용자가 사이트를 북마크할 때 파비콘이 함께 저장되어 나중에 쉽게 찾을 수 있습니다
PWA 지원: Progressive Web App에서는 파비콘이 홈 화면 아이콘으로 사용됩니다

파비콘 하나가 웹사이트의 전문성과 완성도를 결정짓는 중요한 요소라는 점을 기억하세요.

파비콘 크기 설명

파비콘은 단일 크기가 아닌 여러 크기로 제공해야 다양한 플랫폼과 기기에서 최적의 상태로 표시됩니다. 각 크기별 용도를 살펴보겠습니다.

16x16 픽셀

브라우저 탭에 표시되는 가장 작은 크기입니다. 과거에는 이 크기가 표준이었지만 고해상도 디스플레이가 보편화되면서 단독으로 사용하기에는 부족합니다. 여전히 일부 브라우저에서 사용되므로 포함하는 것이 좋습니다.

32x32 픽셀

현재 브라우저 탭에서 가장 널리 사용되는 표준 크기입니다. Retina 디스플레이를 포함한 대부분의 데스크톱 브라우저에서 이 크기를 우선적으로 사용합니다. 반드시 포함해야 하는 필수 크기입니다.

48x48 픽셀

Windows의 작업 표시줄과 바로가기 아이콘에 사용됩니다. ICO 파일 내에 포함하면 Windows 환경에서 선명하게 표시됩니다.

180x180 픽셀

Apple Touch Icon으로 사용되는 크기입니다. iOS 사용자가 웹사이트를 홈 화면에 추가할 때 이 크기의 아이콘이 표시됩니다. Apple 기기를 지원하려면 반드시 포함해야 합니다.

192x192 픽셀

Android Chrome에서 홈 화면에 추가할 때 사용하는 크기입니다. Web App Manifest 파일에서 이 크기를 지정합니다. PWA를 지원하는 경우 필수적입니다.

512x512 픽셀

PWA의 스플래시 화면과 앱 스토어 등록 시 사용되는 가장 큰 크기입니다. Web App Manifest에서 지정하며, 고해상도 환경에서도 선명하게 표시됩니다.

파비콘 형식: ICO vs PNG vs SVG

파비콘에 사용할 수 있는 이미지 형식은 여러 가지가 있으며, 각각 장단점이 있습니다.

ICO 형식

ICO는 파비콘의 전통적인 표준 형식입니다. 하나의 파일에 여러 크기의 이미지를 포함할 수 있다는 것이 가장 큰 장점입니다. 예를 들어, 16x16, 32x32, 48x48 크기를 하나의 ICO 파일에 담을 수 있습니다.

장점: 모든 브라우저에서 지원, 다중 크기 포함 가능
단점: 파일 크기가 상대적으로 큼, 현대적이지 않은 형식

PNG 형식

PNG는 현재 가장 널리 권장되는 파비콘 형식입니다. 투명 배경을 지원하고, 파일 크기가 작으며, 화질이 우수합니다.

장점: 투명 배경 지원, 작은 파일 크기, 널리 지원됨
단점: 크기별로 별도 파일 필요, IE 10 이하에서 미지원

SVG 형식

SVG는 벡터 기반 형식으로 어떤 크기로든 선명하게 표시됩니다. 2026년 현재 대부분의 주요 브라우저에서 SVG 파비콘을 지원합니다.

장점: 무한 확장 가능, 매우 작은 파일 크기, 다크 모드 대응 가능
단점: IE 미지원, Safari의 제한적 지원

권장 조합

최상의 호환성을 위해 다음 조합을 권장합니다.

favicon.ico (32x32, 16x16 포함) - 레거시 브라우저 대응
favicon.svg - 최신 브라우저용
apple-touch-icon.png (180x180) - iOS 기기용
icon-192.png 및 icon-512.png - Android 및 PWA용

파비콘 만드는 방법

파비콘을 만드는 방법은 여러 가지가 있습니다. 디자인 도구부터 온라인 생성기까지 상황에 맞는 방법을 선택하세요.

디자인 도구 사용

Figma, Adobe Illustrator, Sketch 등의 디자인 도구를 사용하면 처음부터 파비콘을 디자인할 수 있습니다. 이 방법은 브랜드 가이드라인에 맞는 정교한 파비콘이 필요할 때 적합합니다.

파비콘 디자인 시 유의할 점은 다음과 같습니다.

16x16 크기에서도 알아볼 수 있도록 단순한 디자인을 유지하세요
텍스트보다 심볼이나 로고 마크를 사용하세요
브랜드 색상을 활용하되, 배경과 구분되는 대비를 확보하세요
정사각형 캔버스에서 작업하세요

온라인 파비콘 생성기 사용

가장 빠르고 편리한 방법은 온라인 파비콘 생성기를 사용하는 것입니다. 이미지를 업로드하면 필요한 모든 크기와 형식의 파비콘을 자동으로 생성해줍니다.

무료 파비콘 생성기 사용해보기

ToolPal의 파비콘 생성기는 다음과 같은 기능을 제공합니다.

이미지를 업로드하면 모든 표준 크기로 자동 변환
ICO, PNG, SVG 등 다양한 형식으로 내보내기
실시간 미리보기로 다양한 크기에서의 표시 상태 확인
필요한 HTML 코드 자동 생성
별도의 소프트웨어 설치 없이 브라우저에서 바로 사용 가능

기존 로고에서 파비콘 생성

기존 로고가 있다면 이를 파비콘으로 변환할 수 있습니다. 다만, 로고를 그대로 축소하면 16x16 크기에서 알아보기 어려울 수 있으므로 단순화된 버전을 만드는 것이 좋습니다. 로고의 핵심 요소만 추출하여 작은 크기에서도 인식 가능한 형태로 가공하세요.

웹사이트에 파비콘 추가하는 HTML 코드

파비콘 파일을 준비했다면 HTML의 <head> 섹션에 다음 코드를 추가하여 웹사이트에 적용합니다.

기본 설정

가장 기본적인 파비콘 설정입니다.

<link rel="icon" type="image/x-icon" href="/favicon.ico">

권장 전체 설정

모든 플랫폼을 지원하는 종합적인 설정입니다.

<!-- 기본 파비콘 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="32x32">

<!-- SVG 파비콘 (최신 브라우저) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PNG 파비콘 -->
<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 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

Web App Manifest 파일

site.webmanifest 파일에는 Android와 PWA에서 사용할 아이콘 정보를 포함합니다.

{
  "name": "웹사이트 이름",
  "short_name": "사이트",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Next.js에서의 파비콘 설정

Next.js App Router를 사용하는 경우 app 디렉토리에 파비콘 파일을 배치하면 자동으로 인식됩니다.

app/
  favicon.ico
  icon.png
  apple-icon.png

혹은 metadata 객체를 사용하여 프로그래밍 방식으로 설정할 수도 있습니다.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '32x32' },
      { url: '/icon.svg', type: 'image/svg+xml' },
    ],
    apple: '/apple-touch-icon.png',
  },
}

2026년 모범 사례

파비콘 관련 기술과 표준은 계속 발전하고 있습니다. 2026년 현재 권장되는 모범 사례를 정리합니다.

SVG 파비콘 우선 사용

SVG 파비콘은 단일 파일로 모든 크기에 대응할 수 있으며, 다크 모드를 CSS 미디어 쿼리로 지원할 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #e94560; }
    }
  </style>
  <circle cx="50" cy="50" r="45"/>
</svg>

이렇게 하면 사용자의 시스템 테마에 따라 파비콘 색상이 자동으로 변경됩니다.

최소 파일 구성

2026년 기준, 대부분의 상황에서 다음 파일만으로 충분합니다.

favicon.ico - 레거시 브라우저 호환
favicon.svg - 현대 브라우저용
apple-touch-icon.png (180x180) - Apple 기기용
icon-192.png, icon-512.png - PWA용
site.webmanifest - 매니페스트 파일

성능 최적화

파비콘 파일의 크기를 최소화하여 페이지 로딩 속도에 영향을 주지 않도록 합니다.

PNG 파일은 TinyPNG 등의 도구로 압축하세요
ICO 파일에 불필요한 크기를 포함하지 마세요
SVG 파일은 SVGO로 최적화하세요
적절한 캐시 헤더를 설정하여 반복 요청을 줄이세요

접근성 고려

파비콘은 접근성 측면에서도 고려해야 합니다. 색각 이상이 있는 사용자도 파비콘을 식별할 수 있도록 색상 대비를 충분히 확보하고, 색상에만 의존하지 않는 형태를 사용하세요.

흔한 실수와 해결 방법

파비콘 설정에서 자주 발생하는 문제와 그 해결 방법을 알아봅니다.

파비콘이 표시되지 않는 경우

가장 흔한 문제입니다. 다음 사항을 확인하세요.

파일 경로가 올바른지 확인합니다. 절대 경로(/favicon.ico)를 사용하는 것이 안전합니다
파일이 실제로 서버에 존재하는지 확인합니다
브라우저 캐시를 완전히 삭제한 후 다시 확인합니다 (Ctrl+Shift+R 또는 Cmd+Shift+R)
MIME 타입이 올바르게 설정되어 있는지 서버 설정을 확인합니다

파비콘이 흐릿하게 보이는 경우

저해상도 이미지를 사용하면 Retina 디스플레이에서 흐릿하게 보일 수 있습니다. 최소 32x32 크기의 PNG 파일을 사용하고, 고해상도 디스플레이를 위해 더 큰 크기의 파일도 제공하세요.

캐시 문제

브라우저는 파비콘을 강하게 캐시합니다. 파비콘을 변경한 후에도 이전 파비콘이 계속 표시될 수 있습니다. 이 경우 다음 방법을 시도하세요.

<!-- 쿼리 문자열을 추가하여 캐시 무효화 -->
<link rel="icon" type="image/png" href="/favicon.png?v=2">

ICO 파일이 올바르게 생성되지 않은 경우

단순히 PNG 파일의 확장자를 .ico로 변경하면 일부 브라우저에서 인식하지 못할 수 있습니다. 반드시 적절한 도구를 사용하여 올바른 ICO 형식으로 변환하세요. 무료 파비콘 생성기를 사용하면 올바른 형식의 ICO 파일을 쉽게 생성할 수 있습니다.

서로 다른 플랫폼에서 다르게 보이는 경우

각 플랫폼은 파비콘을 다르게 처리합니다. Apple은 모서리를 둥글게 자르고, Android는 원형 마스크를 적용할 수 있습니다. 아이콘의 핵심 요소가 중앙에 위치하도록 하고, 가장자리에 여백을 두어 잘려나가도 문제없도록 디자인하세요. 가능하다면 각 플랫폼에서 실제로 어떻게 표시되는지 테스트하는 것이 좋습니다.

다크 모드 미대응

라이트 모드에서 잘 보이는 파비콘이 다크 모드에서는 보이지 않을 수 있습니다. SVG 파비콘과 prefers-color-scheme 미디어 쿼리를 활용하여 두 모드 모두에서 잘 보이도록 대응하세요. SVG를 사용할 수 없다면, 밝은 테두리나 배경을 추가하여 어두운 배경에서도 식별 가능하게 만드세요.

파비콘은 작은 요소이지만 웹사이트의 전문성과 사용자 경험에 큰 영향을 미칩니다. 위의 가이드를 참고하여 모든 플랫폼에서 최적으로 표시되는 파비콘을 만들어보세요. 빠르게 파비콘을 생성하려면 무료 파비콘 생성기 사용해보기를 활용하세요.