필요할 때 다시 보려고 만든 자료

이번에 Github blog를 리뉴얼하면서 여러 가지들을 공부하고 있습니다.
시행착오를 겪었던 것들 중 다음에도 참고할만한 내용들을 간단하게 정리해보려고 합니다.

오늘 정리해볼 내용은 Favicon 추가하기 입니다.
Github blog를 처음 만들고 나면 favicon이 없어서 페이지 탭에 지구본 모양이 나타나는데요!
이 지구본 모양을 예쁜 저만의 favicon으로 바꿔보겠습니다.

Favicon 이미지 물색

우선 맘에 드는 favicon 이미지를 찾아봅시다! 저는 이 사이트(Flaticon)를 참고했습니다.
저의 블로그 이름이 Decision J의 블로그이니만큼 예쁜 J 이미지를 찾아보았습니다 :)

Favicon 만들기

선택한 이미지를 Favicon으로 만들어보겠습니다. 우선 realfavicongenerator 사이트에 접속해줍니다.

realfavicongenerator 사이트

이 곳에서 Select your Favicon image 메뉴를 클릭하면 아까 물색했던 favicon image를 업로드할 수 있습니다.

Favicon 미리보기

업로드하면 위와 같이 favicon이 적용된 탭 모습 등의 프리뷰 화면을 제공하구요!
아래로 쭉 내려보시면 Generate Your Favicons and HTML code 메뉴가 있습니다. 이 곳을 클릭해줍니다!

얼마 간의 세팅 시간이 지나고 나면 다음과 같은 화면을 보실 수 있습니다.

Favicon 생성

여기서 해주셔야할 일은 두 가지입니다.

1. Assets 폴더에 logo.ico 만들기

Download your package에 쓰여져 있는 메뉴를 클릭해서 Real favicon generator가 만들어준 이미지 파일들을 다운로드합니다. 압축을 풀고 해당 폴더를 깃헙 블로그 폴더의 assets 내에 logo.ico라는 이름으로 넣어줍니다!

2. head.html 코드 수정

다음은 위 사이트에서 보여주는 HTML코드를 우리 블로그의 head.html에 추가해주어야 합니다.
블로그 테마에 따라 head를 변경해주는 파일은 여러 가지가 있을 텐데요! 제가 사용하고 있는 YAT 테마는 _includes/custom-head.html 파일에서 favicon html코드를 추가할 수 있었습니다.

custom-head 코드 추가

Real favicon generator 사이트에서 생성해준 HTML을 복붙하시면 되는데, 이 때 위와 같이 png 파일들의 경로를 1번에서 생성해준 logo.ico으로 href 경로를 수정해주시면 됩니다!

Favicon 생성!

이 과정을 다 거치고 나면 나만의 예쁜 Favicon이 탭에 생성됩니다!!