Jekyll favicon은 사이트에서 baseurl을 사용하는 경우 빌드가 성공하더라도 문제가 생길 수 있습니다. 에셋은 중첩 경로에 배치되지만 HTML은 도메인 루트를 가리키기 때문입니다. 정적 디렉터리에 소스 파일을 두고 Jekyll로 URL을 생성한 다음, 게시하기 전에 빌드 결과를 확인하세요.
준비 사항
- layout 또는 include를 수정할 수 있는 Jekyll 프로젝트.
- 정사각형 SVG, ICO fallback, 선택적으로 180×180 PNG. Mzu favicondl을 사용하면 하나의 이미지로 이 파일들을 만들 수 있습니다.
bundle exec jekyll build를 로컬에서 실행할 수 있어야 합니다.
다섯 단계로 Jekyll favicon 추가하기
영구 소스 폴더 만들기
favicon.svg,favicon.ico,apple-touch-icon.png을assets/images/에 추가합니다._site/는 직접 수정하지 않습니다. Jekyll이 다음 빌드에서 해당 디렉터리를 다시 생성하기 때문입니다.문서 head에 링크 추가하기
테마의
_includes/head.html을 열고 닫는head요소 바로 앞에 다음 태그를 삽입합니다. 테마에 해당 include 파일이 없다면_layouts/default.html에 직접 넣습니다. 레이아웃에서{% include head.html %}을 계속 호출하는지도 확인합니다.<link rel='icon' type='image/svg+xml' href='{{ '/assets/images/favicon.svg' | relative_url }}'> <link rel='icon' sizes='16x16 32x32 48x48' href='{{ '/assets/images/favicon.ico' | relative_url }}'> <link rel='apple-touch-icon' sizes='180x180' href='{{ '/assets/images/apple-touch-icon.png' | relative_url }}'>HTML 명세는
rel='icon'을 아이콘 리소스를 위해 정의합니다. 이 링크를head안에 두면 브라우저가 페이지를 파싱하는 동안 favicon을 발견할 수 있습니다.baseurl을 반영한 URL 생성하기
_config.yml에서baseurl을 배포 경로와 일치하도록 설정합니다. 그런 다음 모든 아이콘 경로에 Jekyll의relative_url필터를 적용합니다. 이 필터는 설정된 base path를 경로 앞에 붙이므로, 하나의 템플릿을 도메인 루트와 프로젝트 하위 경로 모두에서 사용할 수 있습니다.href='/assets/images/favicon.svg'처럼 경로를 직접 지정하지 않습니다. 하위 경로를 무시하기 때문입니다.빌드하고 생성된 사이트 검사하기
다음과 같이 빌드하고 로컬 서버를 실행합니다.
bundle exec jekyll build bundle exec jekyll serve_site/index.html을 열어 각 링크에 예상한 base path가 포함되어 있는지 확인합니다._site/assets/images/아래에 세 파일이 존재하는지 확인합니다. 미리보기할 때는 사이트가/에서 시작한다고 가정하지 말고, Jekyll이 출력한 baseurl 반영 URL을 사용합니다.배포된 응답 검증하기
게시 후 페이지 소스를 확인하고 아이콘 URL을 직접 요청합니다. 페이지가 배포된 경로를 참조해야 하며, 아이콘 요청이 404를 반환하지 않아야 합니다. 이전 아이콘이 계속 표시된다면 파일 이름을 변경하거나
favicon.svg?v=2처럼 query string을 추가합니다. favicon 문제 해결 가이드에는 캐시 관련 점검 항목이 정리되어 있습니다.
흔한 실수
- 생성된 파일 직접 수정:
_site/에 적용한 변경은 다음 build에서 사라집니다. baseurl무시: root-relative path를 사용하면 icon이 잘못된 위치에서 요청될 수 있습니다.- 중복 link 유지: theme icon과 사용자 정의 icon이 서로 경쟁할 수 있습니다. 렌더링된 head에서 원치 않는 link를 제거하세요.
- markup을 body에 배치: link를 head include 또는 layout 안으로 옮기세요.
결론
assets/ 아래에 assets를 배치하고, 재사용 가능한 head template에 link를 넣고, relative_url로 URL을 생성하면 Jekyll favicon을 source에서 production까지 문제없이 옮길 수 있습니다. format 선택과 더 폭넓은 tag 예제는 HTML favicon 가이드를 참고하세요.