[GitBlog] 사이트에 Favicon 추가하기

Favicon

파비콘 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 출처: 위키백과

생성

다음과 같은 파비콘 생성 사이트들이 있다. => https://realfavicongenerator.net, https://www.favicon-generator.org/

직접 그린 그림으로 돌려보면 다음과 같이 다양한 기기들에 대응되는 파비콘들이 생성된다.

이를 사이트에서 안내하는 대로 이미지를 적용할 페이지에 저장한 후 코드를 추가하면 된다.

적용

깃허브 블로그의 경우 _includes/head/custom.html를 수정하여 적용한다.

<!-- 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="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- end custom head snippets -->