사이버 아이덴티티~ 파비콘(Favicon)을 만들어보자! :: 2007. 2. 6. 01:06



우리가 웹서핑을 하다 보면 주소표시줄 왼쪽에 아래와 같은
익스플로러 마크의 아이콘을 만나는것이 대부분 입니다.
사용자 삽입 이미지

이런 투박한 아이콘 말이죠...




그런데 웹 브라우저를 익스플로러 7 이상이나 파이어폭스, 그리고 기타 프로그램을 사용하시는 분들은
 특정 사이트에서 이 익스플로러 마크의 아이콘이 나타나야 할 부분에
전혀 다른 아이콘이 나오는 경우가 있을겁니다.
(익스플로러6는 지원이 되기는 하지만 버그때문에 안나옵니다-_-)
사용자 삽입 이미지 사용자 삽입 이미지
사용자 삽입 이미지 사용자 삽입 이미지
이렇게 말이죠... 이것을 흔히 파비콘(Favicon)이라고 불리는 것들입니다.


사용자 삽입 이미지

제 즐겨찾기 입니다 -_-;

이렇게 보면 파비콘이 설정된 것과 안된것의 차이를 느낄 수 있죠^^
파비콘이 설정된 즐겨찾기 같은 경우에는 아무래도 한눈에 들어오기 마련입니다.



사용자 삽입 이미지

파이어폭스 탭 입니다.

그리고 이렇게 상으로도 확인할 수 있구요^^


요즘 기업 쪽에서는 자신들의 기업 로고를 파비콘으로 채용하고 있는 경우도 있습니다.
(저기 국민은행 같은 경우 말이죠...)

남들과는 조금이라도 더 다르게...
개성의 시대... 사이버 아이덴티티라는 코드와 더불어 파비콘이 확산되가고 있습니다.
사용자 삽입 이미지

이렇게 다른사람 방명록에 글을 남길때도 작동되고...

사용자 삽입 이미지

자신의 블로그에서도 작동합니다.


자 그럼 파비콘(Favicon)을 만들어 자신의 개성을 표현해 볼까요?

준비물
16×16사이즈(256색)의 그림파일과
invalid-file

아이콘 제작기 입니다.


파비콘의 사이즈는 가로 세로 16씩 입니다. 색상을 256색으로 한정한것은...
그 이상의 색상의 경우 방명록과 댓글에서 파비콘이 표현될때...
익스플로러6에서 제대로 표현을 못해주어서 엄청 밉게 나옵니다;;;

그리고 .jpg와 같은 그림 형식이 아니라 .ico
우리가 윈도우 상에서 보는... 단축아이콘의 아이콘모양의 바로 그 파일입니다.
(그래서 ico로 만들어 주는 프로그램이 필요함)

make_icon.zip을 받으시고 압축을 풀면 aicon.exe파일이 있습니다.
이것을 실행해서... File->Open으로 준비한 16×16사이즈(256색)의 그림파일을 불러옵니다.
그리고 File->Save as Single Icon 을 눌러 저장하면 파비콘이 완성됩니다.

완성된 파비콘은 티스토리와 같은 블로그 에서는 간단하게 업로드 및 설정을 할 수 있습니다.
(티스토리의 경우 환경설정->기타설정)

일반 사이트에서의 이용법은... index.html 파일을 열고 <head></head> 사이
<link rel="shortcut icon" href="http://자신의 파비콘이 위치한 주소">
이 코드를 삽압하시면 됩니다.

간단히 예를 들어 홈페이지 루트에 favicon.ico를 올려놓았다면
 <link rel="shortcut icon" href="http://kaicnet.net/favicon.ico"> 가 되겠죠?


자 그럼 이제 적용된 모습을 보시기만 하면 됩니다^^
사용자 삽입 이미지

제 파비콘 입니다.


간담히 제 파비콘을 설명하자면... 정보의 소통을 간략하게 표현한것입니다.
(쉽게말해서... 업로드/다운로드;;)
지금 이 블로그, 위니코리아, 위니쉐어, 쉐어코리아 모두 같은 파비콘을 채용하고 있습니다^^