Favicon 이란?

'Favorites Icon' 의 약자로 Website Icon, Page Icon, URLicon 으로 불리기도 한다.
원래는 Microsoft의 Internet Explorer의 Favorites Bookmark(즐겨찾기)의 표시용도로 개발이 되었지만
최근에 와서는 웹사이트의 브랜드화, 혹은 개인홈페이지나 블로그에서 자신만의 Identity 를 표현하기 위한 용도로 많이 사용된다.
(Favicon은 Internet Explorer 5 이상에서만 제대로 동작한다)

< Favicon을 사용하고 있는 많은 웹사이트들 >
favi9.gif Naver
favi0.gif Casamia Online Store
favi1.gif Keyboard Mania
favi2.gif Parkoz
favi3.gif Art. Lebedev Studio
favi4.gif BrickInside
favi5.gif 외환은행
favi6.gif The Wiizard Works
favi7.gif KB국민은행
favi8.gif Daum

일반적으로 16x16 pixel 크기의 *.ico 형태로 만들어진것을 사용하나
최근에는 Animated GIF나 PNG형태를 사용하기도 한다.

사용하는 방법은 굉장히 간단하다.
일단 사용하고싶은 16x16 pixel의 아이콘만 준비되어져 있다면
표시하고자 하는 사이트의 HTML코드에 단순히 한줄만 추가해 주면 되는데,
간단히 처음 표시되는 index.htm이나 default.htm에 넣으면 되겠다.

준비된 아이콘파일을 자신이 원하는 경로에 올려둔후
(index.html이나 default.html이 있는 루트에 'favicon.ico'이라는 이름으로 올려두는경우에 자동으로 반영되기도 한다)

<head> 와 </head> 사이에
<link rel="shortcut icon" href="아이콘경로/아이콘이름.ico" />
를 넣어주면 된다.

예를 들어 나같은 경우는 favi_vana.gif 이런 16x16 pixel / 256color 의 아이콘을 만들어서 favicon.ico 이란 파일명으로 루트에 올린후

<HTML>
<HEAD>
<link rel="shortcut icon" href="http://vana.kr/favicon.ico">
<TITLE> vana.kr :: It's not Fun, Why do it? </TITLE>
</HEAD>

index.htm 파일의 앞쪽에 위와같이 한줄을 추가하여

favicon_vana.jpg

이렇게 예쁘게(?) 파비콘을 적용하였다.

이 게시물을...
이 글과 관련된 글들(Tag Relation)
  1. [2008/03/01] Favicon 관련 사이트들 by 바나
v  a  n  a  :  vana.kr
-------------------------------------
If it's not FUN, Why do it?
何とかなるさ
재밌는 것만 하고 살자, 어떻게든 되겠지