웹사이트에 파비콘 추가하는 법 (HTML, 워드프레스, React, Next.js)

업데이트: 2026-10-27 · AnyToolsKit

파비콘 추가는 두 단계입니다: 아이콘 파일을 서버에 올리고, HTML head에서 참조하는 것. 일반 HTML, 워드프레스, Vite/React, Next.js, 그리고 GitHub Pages·Netlify·Vercel·Cloudflare Pages 같은 정적 호스팅별 방법을 정리했습니다.

1단계: 파일 만들기

파비콘 생성기를 열고 로고(512px 이상의 정사각형 PNG나 SVG가 가장 좋음)를 넣은 뒤 ZIP을 받으세요. favicon.ico, PNG 아이콘들, apple-touch-icon.png, site.webmanifest, favicon-snippet.html이 들어 있습니다.

일반 HTML 사이트

1. 압축을 사이트 루트 — index.html과 같은 폴더 — 에 풉니다.
2. favicon-snippet.html 내용을 모든 페이지의 <head>에 붙여 넣습니다.
3. 업로드한 뒤 https://내사이트.com/favicon.ico를 직접 열어 제대로 나오는지 확인합니다.

<head>
  <meta charset="utf-8">
  <title>내 사이트</title>
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>

워드프레스

1. 외모 → 사용자 정의하기 → 사이트 아이덴티티(클래식 테마) 또는 외모 → 편집기 → 사이트 로고 블록 설정(블록 테마)으로 이동합니다.
2. 사이트 아이콘에 512×512px 이상 정사각형 이미지를 올리면 워드프레스가 크기와 태그를 자동으로 만듭니다.
3. 테마나 SEO 플러그인도 아이콘을 출력한다면, 태그가 충돌하지 않도록 한 곳만 남기세요.

Vite, Create React App, Vue, Svelte

파일을 public/ 폴더에 복사합니다. public/ 안의 파일은 그대로 사이트 루트에서 제공되므로 /favicon.ico가 동작합니다. 그리고 코드 조각을 컴포넌트가 아니라 index.html에 추가하세요.

Next.js (App Router)

favicon.ico를 app/ 폴더에 바로 넣고 icon.png, apple-icon.png도 함께 두면 Next.js가 <link> 태그를 자동으로 만듭니다. 매니페스트는 app/manifest.ts를 만들거나 site.webmanifest를 public/에 두고 metadata.manifest로 지정하세요.

GitHub Pages, Netlify, Vercel, Cloudflare Pages

이 서비스들은 빌드 폴더를 그대로 제공합니다. 아이콘 파일이 출력 폴더에 포함되는지 확인하세요(보통 public/이나 static/에 두면 됨). 사이트가 username.github.io/project/처럼 하위 경로에 있다면 /favicon.ico는 도메인 루트를 가리키므로 상대 경로(href="favicon.ico")를 쓰거나 하위 경로를 포함하세요.

동작 확인

• 각 아이콘 URL을 직접 열어 404가 아닌 이미지가 보이는지 확인합니다.
• 강력 새로고침(Ctrl+Shift+R / Cmd+Shift+R)을 합니다. 브라우저는 파비콘을 오래 캐시합니다.
• 휴대폰에서 “홈 화면에 추가”로 애플 터치 아이콘과 매니페스트 아이콘을 확인합니다.