파비콘이란?
즐겨찾기 아이콘 즐겨찾기 facovities 와 아이콘 icon 의 합성어로 주소창에 조그만 아이콘으로 표시되어 있는 것을 말하며 아이콘 에디터로 16x16 크기 또는 21x21의 적당한 크기의 ico 파일의 아이콘을 만든 후 그 웹 사이트의 루트 디렉터리에 갖다 넣으면 된다
요즘 왠만한 회사 웹사이트 주소창이나 북마크를 보면 조그만 회사 로고나 기타 아이콘등이 보이는데, 이를 파비콘이라 한다. 파비콘은 회사나 특정 사이트에 대한 아이덴티티를 강화해주고 결국은 브랜드 가치를 창출하는 효과를 가져온다고 할 수 있다 그럼 블로그에 나만의 톡톡튀는 파비콘을 한번 만들어 보자!~
먼저 포토샵이나 그림판에서 파비콘으로 사용할 이미지 또는 글자를 이미지 파일로 만든다.주로 bmb 파일 또는, gif 파일등이 사용되는데 여기서는 bmp 파일을 가지고 설명한다.
나는 포토샵 프로그램을
←이런 모양의 내 닉네임이의 첫 글자인 模(字)를 이용 21x21 픽셀의 크기로 배경색을 투명으로 처리한 아이콘을 하나 만들었다.
이제 아이콘을 만들었다면 http://www.chami.com/html-kit/services/favicon/ 이곳에 접속하여 중간쯤의 찾아보기를 클릭한다.
찾아보기를 클릭후 아까 만들었던 bmp 파일을 내 컴퓨터에서 찾아 아래 Generate Favlcon.ico 버튼을 클릭한다.
그리고 잠시 기다리면 아래쪽에 두개의 파일이 생성된 것을 확인 할수 있다.밑에 Test in Browser 눌러 브라우저에서 어떻게 나타나는지 확인이 가능하다. 위쪽에 Downloae Favlcon 을 눌러 내 컴퓨터의 적당한 폴더로 다운로드 한다. 다운로드 한 후 그 압축된 파일을 풀면 아래와 같은 폴더가 생성된다.
그리고 잠시 기다리면 아래쪽에 두개의 파일이 생성된 것을 확인 할수 있다.밑에 Test in Browser 눌러 브라우저에서 어떻게 나타나는지 확인이 가능하다. 위쪽에 Downloae Favlcon 을 눌러 내 컴퓨터의 적당한 폴더로 다운로드 한다. 다운로드 한 후 그 압축된 파일을 풀면 아래와 같은 폴더가 생성된다.
오른쪽에 표시된 파일이 파비콘으로 사용될 ico 파일이다.다시 왼쪽의 폴더를 클릭해 본다.
그럼 아이콘이 움직이는 왼쪽의 gif 파일과 png 파일이 생성된 것을 확인 할 수 있다.
자 이제 자신의 티스토리 블로그로 접속하여 관리자->환경설정->기타설정을 클릭한다.
자 이제 자신의 티스토리 블로그로 접속하여 관리자->환경설정->기타설정을 클릭한다.
그리고 파비콘 파일란에 아까 처음 보았던 ico 파일을 그리고 아래 블로그 아이콘 파일에 gif 에니메이션 파일을 각각 찾아 넣고 저장하기를 클릭한다.
그럼 이런 화면이 나오게 되는데 위쪽에 파비콘 미리보기를 눌러 확인이 가능하며 아래 블로그 아이콘에서는 움직이는 아이콘이 들어간 것을 확인 할 수 있다.오른쪽에 확인을 눌러주면 모든 설정이 끝이 난다.
자 이제 모두 완료 되었으니 과연 브라우저에서 어떤 형태로 파비콘이 보이는지 확인해 보자.
위의 화면은 파이어폭스 브라우저에서 파비콘이 들어가 있는것을 확인 할 수 있다. 인터넷 익스플로러는 하루정도는 시간이 지나야 적용이 되므로 느긋하게 기다리면 자동으로 설정이 완료된다.
그럼 만약에 다른 사람들이 내 블로그를 즐겨찾기 했을때는 어떤 모양의 파비콘 보여 질까?
위의 화면은 파이어폭스 브라우저에서 파비콘이 들어가 있는것을 확인 할 수 있다. 인터넷 익스플로러는 하루정도는 시간이 지나야 적용이 되므로 느긋하게 기다리면 자동으로 설정이 완료된다.
그럼 만약에 다른 사람들이 내 블로그를 즐겨찾기 했을때는 어떤 모양의 파비콘 보여 질까?
파이어폭스 북마크에 나타난 파비콘이다.이렇게 나만의 파비콘이 위쪽 보느것과 같이 다음의 파비콘과 같이 내 블로그도 첫 머리에 올려져 있는것을 확인 할 수 있다. 물론 인터넷 익스플로러에서도 같이 적용이 된다
