파비콘이란 favorite icon라고 하는데
여기에 보이는 녹색 바탕의 N의 아이콘이 파비콘이다. 자신의 웹 사이트에 파비콘을 설정하면 웹사이트를 사용자에게 더 쉽게 기억시킬 수 있을 것이다.
아무튼 파이콘을 만들어보자.
그림판 실행
포토샵이든 어떤 그래픽 툴이든 상관은 없지만, 그림판이 가장 간단하므로 그림판으로 만들어 보자.
실행 시키고 캠퍼스의 크기를 16X16으로 줄인다
Ctrl+마우스 스크롤로 캠퍼스를 확대 축소할 수 있으므로, 확대 후에 원하는 그림을 그려본다.
다 그린 후 저장을 한다. 그림파일이면 되는데, 여기선 PNG파일로 저장을 했다.
파비콘 만드는 사이트
파비콘을 만드는 방법은 여러가지가 있겠지만, 파비콘을 만드는 사이트를 이용하여 쉽게 만들 수 있으므로 이용한다.
http://www.degraeve.com/favicon/
위 사이트는 파비콘을 쉽게 만들어 준다.
파일 선택을 눌러서 자신이 처음에 만든 그림 파일을 선택한 후 upload image를 클릭하면 파일이 업로드 되면서 다음과 같은 화면이 나온다.
위와 같은 화면에서 파란색을 조정하여 최대로 늘려준다.
우리는 16X16을 맞춰서 그림파일을 만들었지만, 더 큰 그림의 일부를 원한다면 파란 표시 안에 원하는 부분을 위치시키고 Crop Picture >>를 누르면 된다.
다음 이와 같이 수정할 수 있는 화면이 나오는데 수정을 다 했다면 Make Favicon!을 클릭한다.
아래와 같은 창이 뜨면 아래 설명대로 오른쪽 클릭 후 이미지를 다른 이름으로 저장을 하면 된다.
파비콘을 자신의 웹 사이트에 적용하는 방법
티스토리 블로그의 경우
만약 자신의 블로그가 티 스토리라면 다음과 같이 해준다.
관리 -> 환경설정->기본정보에 가서
파비콘에 직접 등록 할 수 있다.
티스토리 블로그가 아닌 경우
<LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsite.com/favicon.ico" />
자신의 웹 페이지의 header (헤더) 안에 위와 같은 코드를 넣어주면 된다.
참고 : 인터넷 익스플로러에서는 파비콘을 등록하면 바로 갱신이 되지만 크롬의 경우는 바로 갱신이 안 되는 것 같다. 캐쉬를 모두 지운 후 또는 처음 방문자의경우는 제대로 갱신 되므로 걱정하지 말자.