웹사이트에 favicon을 추가하는 것은 가장 간단하면서도 가장 영향력 있는 작업 중 하나입니다. 여기 최소한의 설정부터 완벽한 전문가 설정까지, 전체 HTML 코드 가이드가 있습니다.

1단계: Favicon 파일 준비하기

HTML을 작성하기 전에 실제 아이콘 파일이 필요합니다. 두 가지 옵션이 있습니다.

최소한 다음이 필요합니다.

2단계: 파일을 루트 디렉토리에 배치하기

favicon 파일을 웹사이트의 루트(index.html과 동일한 수준)에 업로드하십시오. 브라우저는 HTML 선언 없이도 루트에서 /favicon.ico를 자동으로 찾습니다.

your-website/
├── index.html
├── favicon.ico
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

3단계: <head>에 HTML 추가하기

최소 설정 (2줄)

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

이것은 브라우저 탭과 iOS 홈 화면을 처리합니다. 대부분의 개인 프로젝트에 충분합니다.

권장 설정 (5줄)

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

이것은 모든 최신 브라우저, iOS, Android 및 PWA를 지원합니다. 이것이 프로덕션 웹사이트에 권장하는 설정입니다.

완벽한 전문가 설정 (테마 색상 포함)

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.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">
<meta name="msapplication-TileColor" content="#ffffff">

site.webmanifest 파일

이 JSON 파일은 Android 및 PWA에 아이콘에 대한 정보를 알려줍니다.

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

프레임워크별 지침

React (Create React App / Vite)

favicon 파일을 public/ 폴더에 배치하고, public/index.html (CRA) 또는 index.html (Vite)에 링크 태그를 추가하십시오.

Next.js (App Router)

favicon.ico를 app/ 디렉토리에 배치하십시오. Next.js 13+는 이를 자동으로 제공합니다. 다른 형식의 경우 layout.tsx의 metadata export를 사용하십시오.

WordPress

외모 → 사용자 정의 → 사이트 아이덴티티 → 사이트 아이콘으로 이동하십시오. 512×512 PNG를 업로드하면 WordPress가 모든 크기를 자동으로 생성합니다.

Favicon 테스트하기

코드를 추가한 후:

  1. 브라우저를 하드 새로고침하십시오 (Ctrl+Shift+R 또는 Cmd+Shift+R) — favicons는 강력하게 캐시됩니다.
  2. 캐시를 완전히 우회하려면 시크릿/개인 모드로 여십시오.
  3. Google 리치 결과 테스트를 확인하여 검색 결과에 favicon이 어떻게 나타나는지 확인하십시오.
  4. 실제 iPhone/iPad에서 홈 화면에 추가하여 테스트하십시오.

피해야 할 일반적인 실수