파비콘 만들기

파비콘은 웹상에서 특정 사이트나 페이지를 대표하는 아이콘으로 사용합니다. 통상 웹브라우저의 제목줄 앞에 표시하거나 북마크에 표시해서 해당 사이트나 페이지를 쉽게 구별할 수 있도록 한 것입니다. 아래의 그림은 크롬의 사례로 제목줄과 북마크에 파비콘을 표시하고 있습니다.

웹브라우저가 위의 그림과 같이 파비콘을 인식할 수 있는 것은 웹페이지 내부에 아래의 그림과 같이 페이지에 사용할 파비콘을 link 태그의 rel="shortcut icon" 속성으로 지정하기 때문입니다. 아래의 그림은 티스토리의 파비콘 설정입니다.

파비콘 파일은 16*16에서 64*64의 크기가 가능하며 8비트부터 32비트까지의 색상을 표현할 수 있습니다. 김프등의 도구로 파비콘을 직접 만들수도 있지만 파비콘 용도로 사용할 간단한 이미지가 있다면 웹 사이트를 통해서 간단히 파비콘을 만들 수 있습니다. 

파이콘을 무료로 간단히 만들수 있는 곳은 http://www.favicon-generator.org/ 입니다.

파비콘 생성 이전에 파비콘으로 만들 이미지를 *gif, *.jpg, *.png 형태중의 하나로 준비합니다.

[파일선택]을 클릭해서 준비한 이미지를 선택하고 "Generate only 16x16 favicon.ico"를 선택한 다음 [Create Favicon]을 클릭하면 아래의 화면과 같이 생성한 파비콘을 다운로드 받을 수 있습니다.

"Download the generated favicon" 링크를 클릭하면 생성된 파비콘을 다운로드 받을 수 있습니다. 다운로드된 파비콘을 웹서버에 올리고 <link 태그로 지정한 위치와 맞추면 파비콘 적용 작업까지 끝낼 수 있습니다.

티스토리의 경우에는 관리자 페이지 환경설정>기본정보에서 아이콘 항목에 있는 파비콘에 아래의 그림과 같이 다운로드 받은 파일을 등록하면 됩니다.