웹사이트 파비콘 만드는 방법 – 완전 가이드

파비콘은 브라우저 탭, 북마크, 방문 기록에서 웹사이트 이름 옆에 표시되는 작은 아이콘입니다. 작은 크기에도 불구하고 브랜딩과 사용성에서 큰 역할을 합니다 — 수십 개의 열린 탭 중에서 사용자가 내 사이트를 시각적으로 식별하는 방법입니다. 올바른 파비콘을 만들고 구현하는 데 필요한 모든 것을 소개합니다.

어떤 크기가 필요한가요?

파비콘은 컨텍스트에 따라 다른 크기로 표시됩니다. 반드시 커버해야 하는 필수 크기는 다음과 같습니다:

16 × 16 px — 브라우저 탭 아이콘 (가장 일반적인 표시 크기)
32 × 32 px — 고해상도(HiDPI) 화면의 브라우저 탭, 작업 표시줄 바로 가기
48 × 48 px — Windows 사이트 바로 가기
180 × 180 px — iOS 홈 화면 북마크용 Apple Touch 아이콘
192 × 192 px — Android Chrome 홈 화면 아이콘
512 × 512 px — PWA 스플래시 화면 아이콘

전통적인 .ico 포맷은 여러 크기를 하나의 파일에 묶을 수 있어 사이트 루트의 기본 favicon.ico로 표준이 됩니다. 현대적 접근법에서는 더 선명한 렌더링을 위해 PNG와 SVG 파비콘도 포함됩니다.

이미지를 ICO로 무료 변환 →

파비콘 포맷 설명

ICO (고전적인 방식)

ICO 포맷은 웹 초창기부터 존재했습니다. 주요 장점은 하나의 .ico 파일에 여러 크기(16px, 32px, 48px)를 묶을 수 있다는 것입니다. 브라우저는 필요한 크기를 자동으로 선택합니다. 사이트의 루트 디렉토리에 favicon.ico 파일을 배치하면, HTML 링크 태그 없이도 대부분의 브라우저가 자동으로 찾습니다.

PNG (현대 표준)

PNG 파비콘은 만들기 더 간단하고 전체 알파 투명도를 지원합니다. 모든 현대 브라우저는 <link> 태그를 통한 PNG 파비콘을 지원합니다. 단점은 각 크기마다 별도의 파일이 필요하다는 것입니다. 대부분의 사이트에서 32×32 PNG 하나로 대부분의 사용 사례를 커버할 수 있습니다.

SVG (미래를 위한 선택)

SVG 파비콘은 벡터 기반으로, 어떤 크기에서도 픽셀화 없이 완벽하게 확장됩니다. 단일 SVG 파일로 다양한 래스터 크기를 모두 대체할 수 있습니다. 2026년에 SVG 파비콘 브라우저 지원이 뛰어나며 Chrome, Firefox, Edge, Safari 모두 지원합니다. SVG는 벡터로 표현 가능한 로고와 기하학적 디자인에 이상적인 선택입니다.

HTML에 파비콘 추가하는 방법

2026년 권장 접근법은 SVG 파비콘을 기본으로 제공하고 ICO 폴백과 Apple Touch Icon을 포함하는 것입니다:

<!-- SVG 파비콘 (최신 브라우저) -->

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

<!-- ICO 폴백 (구형 브라우저) -->

<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- Apple Touch Icon (iOS 홈 화면) -->

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

이 세 줄 설정으로 거의 모든 브라우저와 기기를 커버할 수 있습니다. SVG를 이해하는 브라우저는 벡터 아이콘을 사용하고, 구형 브라우저는 ICO로 폴백하며, iOS는 홈 화면 북마크에 Apple Touch Icon을 사용합니다.

효과적인 파비콘 디자인 팁

단순하게 유지하세요. 16픽셀 너비에서는 세밀한 디테일이 사라집니다. 굵은 형태, 단일 문자, 또는 로고의 단순화된 버전을 사용하세요.
높은 대비를 사용하세요. 파비콘은 밝은 테마와 어두운 테마 브라우저 모두에서 읽힐 수 있어야 합니다. 두 가지 배경에서 모두 테스트하세요.
텍스트는 피하세요(대부분). 단일 문자나 두 글자 약자는 가능하지만, 전체 단어는 파비콘 크기에서 읽을 수 없습니다.
브랜드 색상을 사용하세요. 색상은 사용자가 탭을 가장 빠르게 식별하는 방법입니다. 눈에 띄게 만드세요.
실제 크기에서 테스트하세요. 정밀하게 512px에서 디자인하되, 작을 때 잘 읽히는지 확인하기 위해 항상 16px와 32px에서 미리보기를 하세요.

단계별: 파비콘 만들기

로고나 브랜드 마크로 시작하세요. 로고가 복잡하다면 가장 인식하기 쉬운 요소 — 종종 아이콘이나 첫 글자 — 로 단순화하세요.
정사각형 버전을 만드세요. 파비콘은 항상 정사각형입니다. 가장자리에 여백을 두고 1:1 비율에 맞게 디자인을 자르거나 조정하세요.
고해상도로 내보내세요. 디자인을 512 × 512 px PNG로 저장하세요. 이렇게 하면 축소할 수 있는 깨끗한 소스 파일이 만들어집니다.
ICO 파일을 생성하세요. QuickImg의 이미지를 ICO로 변환 도구를 사용하여 PNG에서 다중 크기 ICO 파일을 만드세요. 16, 32, 48, 256px 버전이 하나의 파일에 자동으로 생성됩니다.
Apple Touch Icon을 만드세요. 소스 이미지를 180 × 180 px로 조정하고 PNG로 저장하세요. 누군가 사이트를 iOS 홈 화면에 추가할 때 사용됩니다.
HTML 태그를 추가하세요 위의 코드 스니펫을 사용하여 페이지의 <head> 섹션에 추가하세요.

지금 파비콘 만들기 →

파비콘 테스트하기

파비콘을 구현한 후 여러 브라우저(Chrome, Firefox, Safari, Edge)와 데스크톱 및 모바일 모두에서 테스트하세요. 브라우저 탭, 북마크 표시줄, 소셜 미디어에서 링크로 공유할 때 올바르게 표시되는지 확인하세요. PWA를 구축하는 경우 manifest.json의 아이콘이 Android와 iOS 홈 화면에서 올바르게 표시되는지도 확인하세요.

QuickImg의 파비콘 도구는 완전히 브라우저에서 실행됩니다. 업로드, 계정, 워터마크가 없습니다. ICO 파일을 생성하고 이미지를 원하는 크기로 즉시 무료로 조정할 수 있습니다.

이미지를 원하는 크기로 조정 →