[Github Blog] 파비콘(Favicon) 설정하기 - 7
파비콘(Favicon)이란 ?
파비콘(Favicon)이란, 인터넷 웹 브라우저의 주소창에 표시되는 대표 아이콘입니다.
파비콘을 설정하지 않으면, 위 이미지와 같이 지구본 모양으로 출력됩니다.
나만의 블로그를 만들기 위해서는 파비콘을 설정해보시는게 어떨까요 ?
아이콘 검색
아이콘을 검색하는 사이트는 크게 두가지 입니다.
저의 경우엔, 임의의 이미지를 사용하여 만들었습니다.
아래 사이트에서 원하시는 아이콘을 검색하여 파비콘을 생성해도 무방합니다.
favicon.ico 생성
저는 해당 이미지로 파비콘을 제작하겠습니다.
Favicon Generator에 접속합니다.
Select your Favicon Image를 클릭하여 사용하려는 이미지를 불러와주세요.
각각 환경에서 출력되는 파비콘이 적용되는 모습도 보여줍니다.
커스텀 설정으로 이미지를 각지게 또는 둥글게, 크기, 배경색을 설정할 수 있습니다.
스크롤을 아래로 내리시면 Generate your Favicons and HTML code 버튼을 클릭하여 압축파일을 다운로드, html코드가 출력됩니다.
Favicon Package
Favicon Package버튼을 클릭하고 압축을 풀어준 뒤,
아래의 경로에 해당 파일들을 옮겨주세요.
경로 : github.io 폴더 > assets 폴더 > logo.ico 폴더 (신규생성 / 임의의 폴더명 사용가능)
이렇게 하면, 기초 세팅은 끝입니다.
custom.html 수정
- 파일위치 : github.io 폴더 > _includes 폴더 > _head 폴더 > custom.html 파일
생성된 html코드에서 href 부분을 사용자의 이미지 위치에 맞게 수정하는 작업입니다.
여기서 눈치채신 분들도 계시겠지만, 이전단계에서 만든 폴더의 경로가 href부분에 사용됩니다.
따라서, logo.ico라는 폴더명이 아니라도 custom.html을 수정하는데 문제가 없습니다.
다른 폴더명을 사용하신다면, 아래의 코드 중 (사용자 지정 폴더 이름) 을 지정하신 폴더명으로 변경하시어 사용하시면 됩니다.
완성
모든 작업이 완료되셨다면 위와같이 브라우저 탭에 파비콘이 출력됩니다.