파비콘(Favicon)이란 무엇인가?
웹 브라우저를 열면 탭 왼쪽에 작은 아이콘이 보입니다. 바로 파비콘(Favicon)입니다. "Favorites Icon"의 줄임말로, 1999년 인터넷 익스플로러 5가 처음 도입한 이 작은 아이콘은 이제 웹 브랜딩의 핵심 요소가 되었습니다.
파비콘은 단순한 장식이 아닙니다. 브라우저 탭, 북마크 목록, 모바일 홈 화면 바로가기, 검색 결과 페이지 등 다양한 곳에 노출되어 방문자가 여러분의 사이트를 즉시 식별할 수 있게 해줍니다. 잘 만들어진 파비콘은 브랜드 신뢰도를 높이고 사용자 경험을 크게 개선합니다.
과거에는 파비콘을 만들기 위해 별도의 그래픽 툴이나 복잡한 변환 작업이 필요했지만, HMApps 파비콘 생성기를 이용하면 이미지만 업로드하면 즉시 다양한 크기의 파비콘을 생성할 수 있습니다.
파비콘이 필요한 이유 — 브랜딩 그 이상
많은 개발자들이 파비콘을 "있으면 좋은 것" 정도로 여기지만, 실제로는 다음과 같은 중요한 역할을 합니다.
- 브라우저 탭 식별: 여러 탭을 열어둔 사용자가 여러분의 사이트를 즉시 찾을 수 있습니다
- 북마크 시각화: 즐겨찾기에 저장할 때 아이콘이 함께 표시되어 기억하기 쉽습니다
- 모바일 앱 경험: iOS/Android 홈 화면에 추가 시 앱처럼 표시됩니다
- 검색 결과 노출: Google 등의 검색 결과에서 사이트명 옆에 파비콘이 표시됩니다
- 브랜드 일관성: 로고와 일관된 파비콘으로 전문적인 이미지를 전달합니다
- PWA 지원: 프로그레시브 웹 앱의 아이콘으로 활용됩니다
파비콘 없이 배포한 사이트는 브라우저 탭에 기본 아이콘(지구 모양)이 표시되어 즉시 미완성된 느낌을 줍니다. 개인 프로젝트든 상업 서비스든, 파비콘은 런칭 전 반드시 설정해야 할 필수 요소입니다.
파비콘 크기 규격 완전 정리
파비콘이 복잡하게 느껴지는 이유 중 하나가 바로 다양한 크기 규격입니다. 플랫폼별, 용도별로 요구하는 크기가 다르기 때문에 여러 크기를 준비해야 합니다.
| 크기 | 용도 | 파일명 |
|---|---|---|
| 16×16 | 브라우저 탭 (표준) | favicon-16x16.png |
| 32×32 | 브라우저 탭 (고해상도), 북마크 | favicon-32x32.png |
| 48×48 | Windows 사이트 아이콘 | favicon-48x48.png |
| 64×64 | 북마크 바, 웹 클립 | favicon-64x64.png |
| 96×96 | Google TV, Android 크롬 | favicon-96x96.png |
| 128×128 | Chrome 웹스토어 아이콘 | favicon-128x128.png |
| 180×180 | iPhone/iPad 홈 화면 (iOS) | apple-touch-icon.png |
| 192×192 | Android 홈 화면, PWA | android-chrome-192x192.png |
| 512×512 | PWA 스플래시 화면 | android-chrome-512x512.png |
이 모든 크기를 수동으로 만들려면 매우 번거롭습니다. HMApps 파비콘 생성기는 원본 이미지 하나를 업로드하면 이 모든 크기를 자동으로 생성해줍니다.
HMApps 파비콘 생성기 사용 방법
파비콘 생성기는 브라우저에서 직접 실행되므로 이미지가 서버에 업로드되지 않아 개인 정보가 안전합니다. 사용 방법도 매우 간단합니다.
Step 1: 이미지 준비
파비콘으로 사용할 원본 이미지를 준비합니다. 다음 사항을 고려하세요.
- 크기: 최소 512×512px 이상 권장 (큰 이미지를 축소하는 게 반대보다 품질이 좋습니다)
- 형식: PNG, JPG, SVG, WebP 모두 지원
- 모양: 정사각형 비율이 가장 이상적 (비정사각형은 자동으로 패딩 처리)
- 배경: 투명 배경(PNG) 사용 시 더 다양한 환경에서 자연스럽게 표시됩니다
- 디자인: 16×16 크기에서도 알아볼 수 있도록 단순하고 명확한 디자인 필요
Step 2: 이미지 업로드
도구를 열고 이미지 파일을 드래그앤드롭하거나 클릭해서 파일 선택 창을 엽니다. 업로드된 이미지가 각 크기별로 어떻게 보일지 미리보기가 즉시 표시됩니다. 16×16 크기에서 너무 작아 보이거나 알아보기 어렵다면, 더 단순한 이미지로 교체하는 것을 고려하세요.
Step 3: 다운로드 및 적용
미리보기가 마음에 들면 다운로드 버튼을 클릭합니다. 필요한 크기별 PNG 파일들이 생성됩니다. 다운로드한 파일들을 프로젝트의 public 폴더(또는 웹 루트)에 배치합니다.
HTML에 파비콘 적용하는 방법
파비콘 파일을 준비했다면 HTML <head> 섹션에 링크 태그를 추가해야 합니다. 다음은 모든 환경을 커버하는 완전한 파비콘 설정 코드입니다.
<!-- 기본 파비콘 (구형 브라우저 호환) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- 표준 PNG 파비콘 -->
<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 기기 (iPhone, iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android 크롬 / PWA -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- 웹앱 매니페스트 (PWA) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Windows 타일 색상 -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">React / Next.js 프로젝트에서 파비콘 설정
Next.js App Router를 사용하는 경우 app/layout.tsx의 metadata 객체로 관리할 수 있습니다.