Favicon 설정 가이드: React와 Next.js 완벽 구현법
Favicon(파비콘)은 SaaS 서비스의 작은 디테일이지만, 브라우저 탭과 즐겨찾기, 모바일 홈화면 등 사용자의 접점마다 브랜드 인지도를 높여줍니다. 이 가이드에서는 디자인부터 코드 적용까지 실무에 바로 쓸 수 있는 팁과 예시를 담았습니다.
Favicon이 왜 중요한가?
정의와 역할
파비콘(Favorite Icon)은 브라우저 탭, 즐겨찾기, 히스토리, 모바일 홈화면 등에서 사이트를 대표하는 아이콘입니다.
SaaS에서의 효과
✅ 브랜드 인지도
- 여러 탭을 열어도 내 서비스가 눈에 띄게 함
- 통일된 브랜드 인상 유지
- 신뢰감과 프로페셔널함 제공
✅ 사용자 경험
- 탭 간 빠른 식별
- 북마크, 홈화면 추가 시 가시성 확보
- PWA 설치 시 필수 요소
✅ 기술적 장점
- 404 요청 방지
- PWA와 크로스 플랫폼 호환성 강화
파비콘 기본 스펙과 포맷
표준 사이즈 & 포맷
✅ ICO (레거시 지원)
- 16x16: 탭 기본
- 32x32: 데스크탑 브라우저
- 48x48: Windows 바로가기
- 파일명:
favicon.ico
(멀티 사이즈 포함 가능)
✅ PNG (모던 표준)
- 16x16, 32x32, 96x96, 180x180(Apple), 192x192(Android), 512x512(PWA)
✅ SVG (벡터 기반)
- 해상도 무제한 스케일링
- 용량 작고 선명
- IE 미지원
플랫폼별 권장 설정
iOS
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Android
{
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Windows
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
⸻
파비콘 디자인 제작법
✅ 디자인 핵심 • 16x16에서도 알아볼 수 있어야 함 • 단순하고 두꺼운 모양이 유리함 • 너무 얇은 선, 긴 텍스트는 피하기
✅ 컬러팁 • 브랜드 메인 컬러 사용 • 밝은/어두운 배경 모두에서 대비 확보 • 다크모드도 테스트
✅ 권장 캔버스
512x512px, PNG/SVG, 투명 배경, RGB 모드
⸻
SaaS용 React 적용 예시
파일 구조 예시
/public/
├ favicon.ico
├ favicon-16x16.png
├ favicon-32x32.png
├ apple-touch-icon.png
├ android-chrome-192x192.png
├ android-chrome-512x512.png
├ mstile-150x150.png
├ favicon.svg
├ site.webmanifest
└ browserconfig.xml
index.html 기본 설정
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
React 훅으로 동적 파비콘 관리
import { useEffect } from 'react';
export function useFavicon(href) {
useEffect(() => {
const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.rel = 'shortcut icon';
link.href = href;
document.head.appendChild(link);
}, [href]);
}
⸻
Next.js 적용 예시
App Router (app/layout.js)
export const metadata = {
title: 'Your SaaS',
icons: {
icon: [
{ url: '/favicon-16x16.png', sizes: '16x16' },
{ url: '/favicon-32x32.png', sizes: '32x32' },
{ url: '/favicon.ico', sizes: 'any' },
],
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
other: [
{ url: '/android-chrome-192x192.png', sizes: '192x192' },
{ url: '/android-chrome-512x512.png', sizes: '512x512' },
],
},
manifest: '/site.webmanifest',
};
Pages Router (_document.js)
<Head>
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />
</Head>
⸻
고급 예시: 상태/테마 기반 동적 파비콘
function useStatusFavicon(status) {
useEffect(() => {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
ctx.fillStyle = status === 'online' ? '#0f0' : '#f00';
ctx.beginPath();
ctx.arc(24, 8, 6, 0, 2 * Math.PI);
ctx.fill();
document.querySelector("link[rel*='icon']").href = canvas.toDataURL();
};
img.src = '/favicon-base.png';
}, [status]);
}
⸻
캐싱 & 성능 최적화
// Next.js: favicon 캐싱
export async function headers() {
return [
{
source: '/favicon.ico',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
],
},
];
}
⸻
최종 체크리스트
✅ 여러 사이즈 & 포맷 준비 ✅ PWA manifest와 함께 적용 ✅ 테마/상태 기반 동적 파비콘 고려 ✅ 다양한 브라우저/플랫폼 테스트 ✅ 캐싱/압축으로 로딩 속도 최적화
SaaS의 작은 아이콘 하나로 브랜드를 완성하세요. 무료 파비콘 생성 도구와 최적화 스크립트로 바로 시작해보세요!