방금 GitHub Pages에 최신 프로젝트를 배포하셨군요. 코드는 깔끔하고, CSS는 완벽하며, 초록색 체크마크가 빛나고 있습니다. 하지만 브라우저 탭을 보는 순간, 그 밋밋하고 하얀 기본 아이콘이 눈에 들어옵니다. 마치 멋진 정장을 입고 슬리퍼를 신은 것 같은 느낌이죠.
github pages favicon을 추가하는 것은 '취미 프로젝트'와 '전문적인 결과물'을 가르는 결정적인 디테일입니다. 2026년의 사용자들은 탭을 수십 개씩 열어놓고 작업합니다. 아이콘이 없다면 당신의 사이트는 그 속에서 길을 잃게 될 것입니다.
전문적인 아이콘 준비하기
코드를 수정하기 전에 고화질 소스 이미지가 필요합니다. 저는 항상 SVG 형식을 추천합니다. GitHub 자체가 Octocat 로고에 SVG를 사용하는 이유가 있습니다. 어떤 해상도에서도 선명하고 다크 모드 대응이 쉽기 때문이죠. 아직도 흐릿한 16x16 PNG를 쓰고 계신다면 이제는 바꿀 때입니다.
아이콘 제작이 고민된다면 파비콘 디자인 팁을 참고해 보세요. 작은 사이즈에서도 가독성이 좋은 아이콘을 만드는 것이 핵심입니다.
1단계: 아이콘 에셋 생성
이미지 파일 확장자만 favicon.ico로 바꾼다고 끝나는 게 아닙니다. 현대적인 브라우저는 까다롭습니다. 데스크톱, 모바일, 고해상도 디스플레이를 모두 커버하는 아이콘 세트가 필요합니다. Mzu favicondl을 사용하여 apple-touch-icon.png, 다양한 사이즈의 PNG, 그리고 하위 호환성을 위한 favicon.ico를 한 번에 생성하세요.
2단계: 저장소에 업로드
가장 깔끔한 방법은 루트 디렉토리에 /assets 폴더를 만들고 모든 아이콘 파일을 넣는 것입니다. 루트에 파일을 흩어놓는 것보다 나중에 관리하기가 훨씬 편합니다. Jekyll을 사용 중이라면 _config.yml에서 해당 폴더가 제외되지 않았는지 확인하세요.
3단계: HTML 헤더 업데이트
이제 index.html의 <head> 태그 안에 코드를 추가할 차례입니다. GitHub Pages의 URL 구조(username.github.io/project-name/) 때문에 경로 설정에서 실수가 자주 발생합니다.
<link rel='icon' type='image/x-icon' href='./assets/favicon.ico'>
<link rel='apple-touch-icon' sizes='180x180' href='./assets/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='./assets/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='./assets/favicon-16x16.png'>전문가로서 드리는 팁은 항상 ./ 상대 경로를 사용하는 것입니다. 이렇게 하면 프로젝트가 하위 폴더에 있든 커스텀 도메인을 사용하든 문제없이 작동합니다.
GitHub Pages에서 자주 발생하는 문제
가장 흔한 문제는 코드를 수정했는데도 아이콘이 바뀌지 않는 '캐시 문제'입니다. 브라우저는 파비콘 캐시를 매우 강력하게 유지합니다. 이럴 때는 파비콘 캐시 삭제 가이드를 따라해 보세요.
또한 파일명의 대소문자를 주의해야 합니다. GitHub Pages 서버는 대소문자를 구분합니다. Favicon.ico와 favicon.ico는 다릅니다. 모든 파일명을 소문자로 통일하는 것이 정신 건강에 이롭습니다.
github pages favicon 설정은 작은 작업처럼 보이지만, 사용자의 신뢰를 얻는 큰 걸음입니다. 지금 바로 푸시하고 당신의 사이트에 멋진 마침표를 찍으세요.