/ JEKYLL

Jekyll blog - 웹사이트 파비콘(favicon) 설정 방법

Jekyll blog posting

웹사이트 파비콘 설정하는 방법을 알아보자

파비콘(favicon)이란?

파비콘은 인터넷 웹 브라우저의 주소창에 접속했을 때, 상단 탭의 왼쪽에 작게 보여지는 아이콘을 말한다.

즐겨찾기나 바로가기를 설정할 때도 사용되므로 웹사이트를 대표하는 아이콘이라고 할 수 있다.

파비콘을 만들어주는 사이트

https://realfavicongenerator.net/

위 사이트는 원하는 이미지를 파비콘으로 변환시켜준다.

사이트 이용 방법

image

사이트에 접속하면 다음과 같은 화면을 볼 수 있는데 Select your Favicon image라 적혀있는 파란색 네모를 클릭하여 파비콘으로 변환하고 싶은 이미지를 로컬에서 업로드 한다.

image

이미지를 업로드 했다면 다음과 같이 여러가지 설정이 가능한 페이지로 이동하고, 각자 취향에 맞게 조정한 후 스크롤을 내려 Generate your Favicons and HTML code라 적혀있는 파란색 네모를 클릭한다.

image

클릭한 후 다음과 같은 화면이 나타나고, Favicon package라 적혀있는 파란색 네모를 클릭하면 파일을 다운로드 받을 수 있다.

이 파일의 압축을 풀고 폴더 내 모든 파일을 서버의 루트가 되는 폴더에 복사한 후 생성된 코드를 복사하여 html의 <head>에 복사하면 설정한 파비콘을 사용가능하다.