블로그나 웹사이트를 운영할 때 브라우저 탭에 표시되는 작은 아이콘인 파비콘(Favicon)은 브랜드 정체성을 보여주는 아주 중요한 요소입니다. 기존 워드프레스(WordPress) 환경에서 정적 사이트 생성기인 Hugo(PaperMod 테마)로 전환하면서, 파비콘을 새롭게 설정하고 검증하는 과정을 정리해 둡니다.

특히 파비콘 설정 후 RealFaviconGenerator 같은 검사 사이트에서 경고나 에러가 발생하는 원인과, 캐시 문제 해결 방법까지 상세히 살펴봅니다.


1. 파비콘 이미지 파일 준비 및 static/ 폴더 위치

Hugo 프로젝트 구조에서 static/ 폴더 내부의 모든 파일은 빌드 시 사이트 루트 경로(예: https://ricosheaven.com/)로 그대로 복사됩니다.

파비콘 생성을 위해 favicon.io 나 RealFaviconGenerator 같은 사이트를 이용하여 패키지를 생성한 뒤, 아래 파일들을 static/ 폴더 바로 아래에 위치시킵니다.

  • static/favicon.ico (16x16, 32x32, 48x48 멀티 사이즈 아이콘)
  • static/favicon-16x16.png
  • static/favicon-32x32.png
  • static/apple-touch-icon.png (180x180, iOS 홈 화면 저장용)
🚨 주의사항: static/images/favicon.ico 처럼 하위 폴더에 넣지 마시고 반드시 static/ 최상단 루트에 두어야 기본 접근 경로인 /favicon.ico로 서비스됩니다.

2. hugo.yaml 설정 추가 (PaperMod 테마)

hugo.toml이 아닌 hugo.yaml 파일 형식을 사용할 경우, YAML 들여쓰기 규칙에 맞추어 params: 섹션 하위에 assets: 항목을 등록합니다. 

params:
  # ... 기존 params 설정들 ...

  assets:
    favicon: "/favicon.ico"
    favicon16x16: "/favicon-16x16.png"
    favicon32x32: "/favicon-32x32.png"
    apple_touch_icon: "/apple-touch-icon.png"
💡 경로 팁: 파일명 앞에 / (슬래시)를 붙여주면 PaperMod 테마가 HTML의 <head> 태그에 경로를 생성할 때 <link rel="icon" href="https://ricosheaven.com/favicon.ico"> 형태로 정확한 절대 경로를 형성합니다.

3. 브라우저 캐시(Cache) 및 반영 확인 팁

파비콘은 브라우저(특히 Safari, Chrome) 내부 및 구글 검색 서버에 매우 강하게 캐싱됩니다. 워드프레스 시절 사용하던 이전 파비콘이 계속 뜨거나 변경사항이 보이지 않을 때는 아래 방법으로 검증합니다.

① 직접 파일 접속 테스트 (가장 확실함)

브라우저 주소창에 https://ricosheaven.com/favicon.ico 경로를 직접 입력합니다. 404 에러 없이 새로 등록한 아이콘 이미지가 화면 중앙에 출력된다면 Vercel 및 Hugo 배포는 완벽히 성공한 것입니다.

② 사파리 시크릿 창 (개인정보 보호 브라우징)

사파리에서 Cmd + Shift + N 단축키로 개인정보 보호 브라우징 창을 연 후 접속하여 탭 아이콘을 확인합니다.


4. RealFaviconGenerator 에러 해석 및 대처법

파비콘 검사 사이트인 RealFaviconGenerator로 검사했을 때 "Found 3 errors and 1 warning" 메시지가 뜨더라도 당황할 필요가 없습니다.

✅ 정상 인식된 항목 (Classic & Touch icon):
• An implicit ICO favicon is found at /favicon.ico
• ICO favicon found (16x16, 32x32, 48x48)
• The touch icon is declared / downloadable / square (180x180)

➔ PC 브라우저 및 스마트폰 접속 시 필요한 모든 필수 파비콘은 정상 작동합니다!

경고/에러 항목의 원인:

  • There is no SVG favicon: 다크모드 전용 Vector SVG 파비콘이 없다는 경고이나, .ico 및 .png가 있으면 전 브라우저에서 문제없이 표시됩니다.
  • There is no 96x96 desktop PNG favicon: favicon.ico 내부 48x48/32x32 멀티 레이어가 커버하므로 무시해도 됩니다.
  • No web app manifest: PWA(Progressive Web App)용 site.webmanifest 파일이 없다는 안내로, 일반 기술 블로그 운영에는 영향이 없습니다.

5. 결론

Hugo PaperMod 테마에서 파비콘을 적용할 때는 static/ 최상단 경로에 파일들을 위치시키고, hugo.yaml에 올바른 절대 경로(/favicon.ico)를 지정하는 것이 핵심입니다.

직접 URL 접속 시 정상 출력된다면 검사 도구의 PWA 권장 경고 메시지에 연연할 필요 없이, 브라우저 크롤러가 캐시를 업데이트할 때까지 편안하게 블로그를 운영하시면 됩니다!