Hugo favicon 설정으로 사이트 아이콘을 바꾸기

Hugo 사이트는 정상적으로 빌드되지만 브라우저 탭에는 여전히 기본 페이지 아이콘만 표시됩니다. 보통 아이콘 파일이 Hugo의 게시 asset 경로 밖에 있거나 생성된 HTML이 해당 파일을 참조하지 않기 때문입니다. 안정적인 Hugo favicon 설정은 asset과 template을 분리합니다. static/가 파일을 게시하고, layout partial이 브라우저가 참조할 <link> 요소를 추가합니다.

필수 조건

기존 Hugo 사이트, 정사각형 로고 또는 아이콘, layouts 접근 권한이 필요합니다. master file이 PNG 또는 SVG 형식이라면 Mzu favicondl로 ICO fallback을 준비하고, 원본 그래픽은 확보할 수 있는 가장 높은 해상도로 보관하세요.

기존 Hugo 프로젝트
정사각형 SVG와 ICO 아이콘
프로젝트와 theme의 layouts 접근 권한

네 단계로 Hugo favicon 추가하기

게시 파일을 만듭니다. 원본 그래픽을 favicon.svg와 favicon.ico로 변환한 다음, 두 파일을 Hugo의 최상위 static/ 디렉터리에 배치하세요:
```
static/
  favicon.svg
  favicon.ico
```
static/의 파일은 그대로 복사되므로 Hugo가 사이트 루트에 게시합니다.
재사용 가능한 partial을 만듭니다. layouts/partials/head/favicon.html 파일을 다음 내용으로 추가합니다:
```
&lt;link rel='icon' href='{{ "favicon.ico" | relURL }}' sizes='any'&gt;
&lt;link rel='icon' href='{{ "favicon.svg" | relURL }}' type='image/svg+xml'&gt;
```
HTML 명세는 icon link relation을 정의합니다. relURL을 사용하면 사이트가 domain root에 있다고 가정하지 않고, 생성되는 경로가 Hugo의 base path를 따릅니다.
<head> 안에 partial을 렌더링합니다. 프로젝트와 사용 중인 theme에서 document head를 포함한 layout을 찾으세요. head의 닫는 태그 바로 앞에 다음 줄을 추가합니다:
```
&lt;head&gt;
  ...
  {{ partial "head/favicon.html" . }}
&lt;/head&gt;
```
수정할 파일이 theme에 속한다면 먼저 프로젝트의 동등한 layouts/ 경로로 복사하세요. 그렇지 않으면 theme 업데이트 과정에서 수정이 덮어써질 수 있습니다. theme이 이미 favicon partial을 호출한다면 두 번째 partial을 추가하지 말고 기존 partial을 수정하세요.
빌드하고 미리 본 뒤 점검합니다. 다음 명령을 실행합니다:
```
hugo
hugo server
```
로컬 사이트를 열고 browser developer tools에서 페이지 head를 점검하세요. 생성된 아이콘 URL이 200을 반환하는지 확인하고, production build 후 public/favicon.svg와 public/favicon.ico가 존재하는지 확인합니다. framework 패턴을 더 폭�게 비교하려면 static site generator favicon guide를 참고하세요.

흔히 빠지기 쉬운 실수

아이콘을 assets/에만 배치하는 것. 이 디렉터리는 Hugo가 관리하는 리소스를 위한 곳입니다. 변경 없이 제공할 공개 파일은 static/에 넣거나 Hugo의 resource pipeline을 통해 처리해야 합니다.
/favicon.svg 경로를 직접 작성하는 것. 사이트를 subpath에 배포하면 문제가 발생합니다. relURL로 URL을 생성하세요.
theme 파일만 수정하는 것. theme을 업그레이드하면 해당 파일이 대체될 수 있습니다. 가능하면 항상 프로젝트 안에서 override를 유지하세요.
즉시 반영되기를 기대하는 것. 브라우저가 아이콘 URL을 cache할 수 있습니다. 실제 페이지에 여전히 기존 아이콘이 표시된다면 favicon 문제 해결 체크리스트를 따르세요.

최종 결과 확인

생성된 head에 두 개의 link 요소가 모두 포함되고, 참조된 모든 파일이 정상적으로 응답하며, 브라우저 탭에 의도한 아이콘이 표시된다면 Hugo favicon 설정은 완료된 것입니다. 향후 업데이트를 예측하기 쉽게 하려면 원본 아트워크와 생성된 파일을 분리해 두세요.

필수 조건

네 단계로 Hugo favicon 추가하기

흔히 빠지기 쉬운 실수

최종 결과 확인

Hugo 사이트 favicon 준비