github 블로그 favicon 설정하기
1. favicon 이미지 준비
favicon에 사용될 이미지를 다운로드 받아서 준비한다.
2. favicon 생성
2-1. favicon 생성 사이트 접속
https://realfavicongenerator.net
2-2. Select your Favicon image를 클릭하고 준비한 이미지 선택
2-3. 색상등 옵션을 선택
옵션 선택을 하고 스크롤을 아래로 내리면 Generate your Favicons and HTML code 버튼을 클릭한다.
2-4. 생성된 favicon 저장
- Favicon package 버튼을 클릭해서 생성된 favicon을 저장한다.
- 생성된 코드를 전체 선택하고 복사한다.
3. favicon 설정
3-1. 저장한 favicon 폴더의 파일을 블로그의 assets으로 이동
assets폴더 안에 favicon을 저장할 폴더를 생성한다 (ex: /assets/favicon.ico/).
 |
 |
3-2. _includes/head.html 파일 수정
복사 해 놓은 코드를 아래와 같이 <head> 태그 안에 추가한다.
생성되었던 코드중에 webmanifest 를 포함하고 있던 태그는 삭제하고, 대상 기본 경로를 {{site.baseurl}}로 변경한다.
만약 /assets/favicon.ico/ 폴더로 생성하였다면 아래 코드를 복사해서 사용하면 된다.
<!-- start custom head snippets -->
<!-- insert favicons. use https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="{{site.baseurl}}/assets/favicon.ico/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="{{site.baseurl}}/assets/favicon.ico/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="{{site.baseurl}}/assets/favicon.ico/favicon-16x16.png" />
<link rel="mask-icon" href="{{site.baseurl}}/assets/favicon.ico/safari-pinned-tab.svg" color="#000000" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<!-- end custom head snippets -->
Leave a comment