현대 웹을 위한 궁극적인 파비콘 설정은 단 5개의 아이콘 파일과 1개의 웹 앱 매니페스트 JSON 파일로 구성됩니다. 이는 기존의 수많은 정적 PNG 파일을 사용하는 방식에 비해 효율성과 성능 면에서 큰 이점을 제공합니다.
필수 아이콘 세트
favicon.ico(32x32)- 레거시 브라우저 지원 및 Chrome 버그 해결을 위해 사용됩니다.
- 웹사이트 루트 경로(
https://example.com/favicon.ico)에 위치해야 합니다. - HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">태그로 참조합니다.
icon.svg(벡터 이미지)- 최신 브라우저를 위한 SVG 벡터 포맷으로, 크기 조절에 유연하며 파일 크기가 작습니다.
- CSS 미디어 쿼리(
@media (prefers-color-scheme: dark))를 사용하여 라이트/다크 모드에 따라 아이콘 색상을 전환할 수 있습니다. - HTML
<link rel="icon" href="/icon.svg" type="image/svg+xml">태그로 참조합니다.
apple-touch-icon.png(180x180)- iOS 8+ iPad를 포함한 Apple 기기에서 홈 화면에 웹 페이지를 바로가기로 추가할 때 사용됩니다.
- 아이콘 주변에 20px 패딩과 배경색을 추가하여 시각적 완성도를 높이는 것이 권장됩니다.
- HTML
<link rel="apple-touch-icon" href="/apple-touch-icon.png">태그로 참조합니다.
- 웹 앱 매니페스트 (
manifest.webmanifest)- PWA(Progressive Web App) 및 Android 기기 지원을 위한 JSON 파일입니다.
- HTML
<link rel="manifest" href="/manifest.webmanifest">태그로 연결합니다. - 내부적으로 다음 세 가지 PNG 아이콘을 정의합니다.
icon-192.png(192x192): 홈 화면 표시용.icon-mask.png(512x512): 다양한 Android 런처에 맞게 잘릴 수 있는 마스커블 아이콘. 409x409의 안전 영역을 고려한 패딩이 필요합니다.icon-512.png(512x512): PWA 로딩 시 스플래시 화면용.
아이콘 생성 및 최적화
-
SVG 준비: 정사각형 형태의 로고 SVG 파일을 준비하고, 다크 모드 지원을 위한 CSS 스타일을 추가합니다.
-
ICO 생성: GIMP 또는 ImageMagick을 사용하여 32x32 픽셀의
favicon.ico파일을 생성합니다. 필요시 16x16 버전을 포함할 수 있습니다. -
PNG 생성: SVG 원본에서 512x512, 192x192, 180x180 (Apple용), 512x512 (마스커블용) PNG 파일을 생성합니다. 마스커블 아이콘은
maskable.app에서 확인하여 적절한 패딩을 조정합니다. -
파일 최적화: SVGO로 SVG를, Squoosh로 PNG 파일을 최적화하여 파일 크기를 줄입니다.
-
HTML 통합:
<link>태그를 사용하여 아이콘 파일을 HTML<head>에 추가합니다. Webpack과 같은 번들러를 사용할 경우 캐시 버스터를 적용할 수 있습니다. 개발 환경과 프로덕션 환경을 구분하는 별도의 아이콘을 사용하는 것도 좋은 팁입니다. -
웹 매니페스트 생성:
manifest.webmanifest파일을 생성하고 HTML에 링크합니다. WebpackPwaManifest 플러그인을 사용하여 자동화할 수 있습니다.
레거시 형식 정리
Windows Tile Icon, Safari Pinned Icon (Safari 12부터 불필요), rel="shortcut" (유효하지 않은 링크 관계), Opera Coast (단종) 등 더 이상 필요하지 않거나 유효하지 않은 파비콘 형식들은 과감히 제거하여 설정을 간소화합니다.