[Github Blog] 파비콘(Favicon) 세팅하기

Hyeona·2021년 7월 7일
5
post-thumbnail

파비콘(Favicon)이란, 인터넷 웹 브라우저의 주소창에 표시되는 대표 아이콘입니다.
기본적으로 세팅해두지 않으면,

image

크롬을 기준으로 이러한 지구본 모양만 보여지게 됩니다.
블로그의 정체성을 나타내기 위해선, 지구본보단 원하는 모양으로 바꾸는게 좋겠죠!

원하는 이미지 찾기

이미지는 직접 만드셔도 좋고, 찾으셔도 좋습니다.
저같은 경우엔 직접 만들 자신이 없어서 픽토그램을 사용해서 만들기로 했습니다.
자주 사용하던 flaticon을 이용해서 했지만, 이외에도 많은 사이트가 많습니다!

제가 결정한 이미지는 이 이미지입니다.

apple-icon-60x60

이 이미지를 이용해 파비콘으로 등록해보겠습니다.

favicon icon 만들기

realfavicongenerator에 접속해서 원하는 사진을 넣어주세요.

image

흰색 버튼을 보면 Random도 있어서 고민이 되신다면 random하게 받아보시는 것도 좋습니다.

image

해당 사이트에서는 이렇게 각 환경에서 적용되는 모습도 보여줍니다.
이렇게 정리한 후 다운로드를 받으시면 압축 폴더를 받으실 수 있습니다.
정리한 모든 파일을 assets 내의 logo.ico라는 폴더를 만들어 정리해주세요.

image

이렇게 정리하셨으면 1차적으로 정리가 완료되셨습니다.
가장 하단에서 Generate your Favicons and HTML code 버튼을 눌러주세요.

image

그럼 이 코드를 보실 수 있습니다.
이 코드를 활용해서 블로그에 적용해봅시다.

custom.html 수정

  • 수정 파일 : github.io 폴더 > _includes 폴더 > _head 폴더 > custom.html
<!-- start custom head snippets -->

<!-- insert favicons. use https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="{{site.baseurl}}/assets/logo.ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{site.baseurl}}/assets/logo.ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{site.baseurl}}/assets/logo.ico/favicon-16x16.png">
<link rel="mask-icon" href="{{site.baseurl}}/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 -->

최종적으로 업데이트 된 코드는 이와 같습니다.
처음 받은 코드와 다른 내용은 href의 영역 즉 상세 링크입니다.
파일 이름 앞에 {{site.baseurl}}/assets/logo.ico 를 추가해주시면 됩니다.
html에서 변수를 호출하기 위해서는 중괄호가 꼭 이중으로 있어야 합니다.

image

이렇게 최종적으로 적용된 모습을 확인하실 수 있습니다.

profile
✍🏻 뭐든 배우면 다 자산이 되겠죠!

1개의 댓글

comment-user-thumbnail
2023년 7월 18일

좋은 포스팅 감사합니다. 덕분에 저도 잘 적용했네요:)

답글 달기