[Blog] Gitblog Favicon 설정하기

블로그에 파비콘을 설정하는 방법에 대해 알아보도록 하겠습니다.

먼저 원하는 이미지를 찾고, 다운받아 줍니다.(아래 사이트 참고)

• Flaticon

아래 사이트로 들어가서 다운받은 이미지를 등록해줍니다.

• Realfavicongenerator

원하는 설정을 해주고 아래의 버튼을 눌러줍니다.

생성된 아래 화면에서 Favicon Package 버튼을 눌러줍니다.

다운로드 받은 패키지를 아래 위치에 넣어줍니다.

• github.io -> assets
• assets 폴더에 logo.ico라는 이름의 폴더를 만들고 다운받은 패키지를 넣어줍니다.

그런다음, 생성한 HTML코드를 아래 위치에 다음과 같이 넣어줍니다.

github.io -> _includes -> head -> custom.html

추가로 생성한 html코드의 href 태그 부분에 아래 내용을 꼭 붙여줘야 합니다.

/assets/logo.ico/

<!-- start custom head snippets -->

<!-- insert favicons. use https://realfavicongenerator.net/ -->

<link rel="apple-touch-icon" sizes="180x180" href="/assets/logo.ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo.ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/logo.ico/favicon-16x16.png">
<link rel="manifest" href="/assets/logo.ico/site.webmanifest">
<link rel="mask-icon" href="/assets/logo.ico/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#ffffff">

<!-- end custom head snippets -->

위의 사항들을 모두 실행하고 나면 블로그에 파비콘이 적용되어있는 모습을 확인할 수 있습니다.

참고로 파비콘이 바로 적용되지는 않기 때문에 시간을 가지고 조금 기다려야합니다.

---

어느정도의 시간이 지나고 적용된 모습은 아래와 같습니다.