우리가 웹서핑을 하다 보면 주소표시줄 왼쪽에 아래와 같은
익스플로러 마크의 아이콘을 만나는것이 대부분 입니다.
그런데 웹 브라우저를 익스플로러 7 이상이나 파이어폭스, 그리고 기타 프로그램을 사용하시는 분들은
특정 사이트에서 이 익스플로러 마크의 아이콘이 나타나야 할 부분에
전혀 다른 아이콘이 나오는 경우가 있을겁니다.
(익스플로러6는 지원이 되기는 하지만 버그때문에 안나옵니다-_-)
이렇게 말이죠... 이것을 흔히 파비콘(Favicon)이라고 불리는 것들입니다.
이렇게 보면 파비콘이 설정된 것과 안된것의 차이를 느낄 수 있죠^^
파비콘이 설정된 즐겨찾기 같은 경우에는 아무래도 한눈에 들어오기 마련입니다.
그리고 이렇게 탭 상으로도 확인할 수 있구요^^
요즘 기업 쪽에서는 자신들의 기업 로고를 파비콘으로 채용하고 있는 경우도 있습니다.
(저기 국민은행 같은 경우 말이죠...)
남들과는 조금이라도 더 다르게...
개성의 시대... 사이버 아이덴티티라는 코드와 더불어 파비콘이 확산되가고 있습니다.
자 그럼 파비콘(Favicon)을 만들어 자신의 개성을 표현해 볼까요?
준비물
16×16사이즈(256색)의 그림파일과
make_icon.zip
아이콘 제작기 입니다.
파비콘의 사이즈는 가로 세로 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"> 가 되겠죠?
자 그럼 이제 적용된 모습을 보시기만 하면 됩니다^^
간담히 제 파비콘을 설명하자면... 정보의 소통을 간략하게 표현한것입니다.
(쉽게말해서... 업로드/다운로드;;)
지금 이 블로그, 위니코리아, 위니쉐어, 쉐어코리아 모두 같은 파비콘을 채용하고 있습니다^^
http://kaicnet.net/trackback/27에서 펌글
'자료실 > webpage' 카테고리의 다른 글
iNove TYZEN.NET Theme 버젼 (0) | 2012.07.19 |
---|