Favicon 세팅하기(minimal-mistakes)
Favicon 세팅하기
jekyll blog theme(minimal-mistakes)
파비콘(Favicon)이란, 인터넷 웹 브라우저의 주소창에 접속했을 때, 상단 탭의 왼쪽에 작게 보여지는 아이콘을 말한다.
크롬에서 아무 세팅을 해주지 않으면 지구모양의 파비콘이 보여진다. 블로그를 대표하는 아이콘을 바꿔보자.
이미지 찾기
직접만드는 방법도 있지만 픽토그앰을 이용해서 만들었다. 이미지를 가져올수있는 사이트들이다.
이런 이미지를 가져와 봤다.
favicon icon 만들기
realfavicongenerator에 접속하여 아까 선택한 사진을 넣어준다.
선택한 파비콘이 환경에 따라 어떻게 보여지는지 확인하고 조절할 수있다.
마지막에 파비콘을 어떤 경로에 업로드 할것인지 지정해준후에
맨밑에 Generate your Favicons ans HTML code를 누르면
이렇게 나온다. Favicon pakage버튼을 누르고 파비콘 파일을 다운로드한다.
다운로드한 파일을 assets 내의 logo.ico라는 폴더를 만들어서 넣어준다.
custom.html 수정
아까 generate한 이후에 받았던 html코드를 참고하여 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="/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 -->
최종적으로 이렇게 적용된 모습을 확인할 수 있다.
Comments