[Jekyll] Favicon 적용하기

Favicon?

Favorite Icon의 약자로 웹페이지에 접속했을 때, 상단 탭에 보여지는 icon.
즐겨찾기에 추가할 때에도 해당 Icon이 사용됩니다.

아래는 제 blog의 최초 Favicon입니다. 아무런 셋팅도 하지 않았기 때문에 default icon이 보입니다.

나만의 Favicon 만들기

아래 사이트에서 favicon을 직접 만들 수 있다고 합니다. (저는 귀찮아서 안해봤습니다)
http://www.degraeve.com/favicon/

원하는 이미지 찾기

저는 아래 blog에 있는 정보를 보고, 그 중 Flaticon(플랫아이콘)이라는 곳에서 무료 아이콘을 하나 받았습니다.
https://blog.wishket.com/%EC%A0%80%EC%9E%91%EA%B6%8C-%EA%B1%B1%EC%A0%95-%EC%97%86%EB%8A%94-%EB%AC%B4%EB%A3%8C-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%82%AC%EC%9D%B4%ED%8A%B8/

Favicon 만들기

1. https://realfavicongenerator.net/ 에 접속해서 방금 받은 icon 이미지를 선택해줍니다.
   
   

2. “Select your Favicon image”를 누르고 icon 이미지를 선택해주면 아래 화면이 나옵니다.
   
   필요한 셋팅을 하시고 맨 아래에 있는 “Generate your Favicons and HTML code”를 선택하시면 됩니다.
   
   

3. 아래 page에서 “Favicon package”를 선택하면 생성된 Favicon이 download됩니다.
   제 경우(minimal-mistake)에는 생성된 HTML도 이용할 것이기 때문에 생성된 HTML code를 복사합니다.
   
   

Jekyll에 favicon 적용

_includes/_head/custom.html에 위에서 복사한 HTML을 붙여넣기 해줍니다.

<!-- start custom head snippets -->

<!-- insert favicons. use https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

<!-- end custom head snippets -->

위에서 바꿔야 할 내용이 있는데 바로 href tag입니다. 저는 보통 image들을 assets/images에 두는데, 해당 경로에 위에서 생성 후 다운 받은 favicon 파일들을 넣고 위 HTML의 href를 수정해줍니다.

<!-- start custom head snippets -->

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

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

<!-- end custom head snippets -->

적용 후 실제 변경 확인