파비콘(Favicon)이라고 들어본적 있나요?
파비콘은 'Favorate + Icon' 의 합성어로 즐겨찾기(북마크) 아이콘 정도로 해석이 되지 않는가 싶다. 간단하게 보자면 아래 그림 같은 것이다.
네이버 할 때 우리가 떠올리는 그림이 무엇인가... 아마도 모자에 날개달린 이미지를 떠 올릴것이다. 그것이 브라우저로 해당 페이지에 들어갔을때 뜨게 하는것이 파비콘이다. 이것은 어떤 사이트를 기억에 남게 하는데도 상당히 효율적이다. 그러므로 홈페이지나 블로그를 운영한다면 이런 파비콘 등록은 추천해 줄만하다고 할 수 있다.
그렇다면 이제 파비콘을 만들고 홈페이지에 적용시키는 작업을 해보자.
파비콘(Fvicon) 파일 만들기
우선은 파비콘이 될 이미지를 준비해야된다.
여러 이미지들이 가능하지만 추천 하는 것은 16*16 (256색) gif 파일이다.
이유는 위의 셋팅이 어떤 브라우저에서도 안정된 파비콘을 보여줄 수 있기 때문이다. 솔직히 아이콘이 작기 때문에 많은색을 쓸 이유가 없다.
문제는 이 이미지 파일이 아이콘 파일인 *.ico 파일을 얻어야 된다. 물론 걱정할 필요는 없다. 네이버 자료실 같은데가면 아이콘을 만들어 주는 프로그램들이 있지만... 프로그램 설치하고 만들고 하기 귀찮지 않은가 그래서 이미지만 준비한다면 쉽게 이미지 파일을 아이콘 파일로 만들수 있는 곳이 있다.
http://209.59.146.86/favicon/index.php
바로 위에 사이트로 접속하면 쉽게 이미지를 아이콘으로 바꿀 수 있다.
접속했다가 영어 인것을 보고 당황하지 않았으면 좋겠다. 여기에 간단한 제한사항이 있다.
- 지원 파일 포맷 : gif, jpg, png, bmp
- 투명한 gif이나 png를 사용할 수 있다.
- 파일 최대 크기 : 150.00kB.
변환 방법은 [선택]을 클릭하고 파일을 선택하고 [Create Icon]을 누르면 16*16 프리뷰가 나온다. 아이콘을 확인한 다음에 [Download Favicon]을 클릭하면 아이콘 파일로 바뀐 파일을 다운 받을 수 있다.
파비콘 홈페이지나 블로그에 적용하기
이제 아이콘 파일을 만들었으니 적용할 일만 남았다. 적용방법은 간단하다.
첫째, 아이콘을 웹 상에 올린다.
보통은 자신의 계정에 올리지만.. 혹시 트래픽을 조금이라도 아끼고 싶다면 이미지를 올릴수 있고 이미지 주소가 고정되는 곳에 이미지를 올린다. 파일이 아주 작기 때문에 이럴 필요가 있나 싶기는 하다. 이런 파비콘 파일을 대량으로 관리하는 곳은 따로 서버를 만들기는 하지만 말이다 ^^;
둘째, 메인페이지(보통 index.html 이고, 티스토리 블로그 같은 경우라면 skin.html 이다.)의 <head> 와 </head> 사이에 아래 코드를 입력해 준다.
<link rel="shortcut icon" href="파비콘 아이콘 업로드한 주소" />
예를 들어보자....
파비콘 파일이름 : favicon.ico
업로드 위치 : http://moss2.tistory.com/
이렇다면 들어가야될 코드는 아래와 같다.
<head>
<link rel="shortcut icon" href="http://moss2.tistory.com/favicon.ico" />
.
.
.
</head>
셋째, 파일을 똑바로 업로드하고, 정확히 코드를 넣었다면 모든 것이 끝났다. 그런데 알아둘 것이 있다. 만약 익스플로러6을 사용한다면 아마도 90%정도의 확률로 보이지 않을 것이다. 익스플로러7 이나 파이어폭스 등 기타 브라우저에서 보일것이다. 그런데 바로 적용되지 않을 수도 있다. 버그로 인해서 몇 일이 지나야 적용되는 경우도 있다.
위에 과정을 제대로 따라했다면 아래와 같이 적용된 모습을 볼 수 있을 것이다.
추가로 티스토리에서 파비콘 적용법을 알아보자.
티스토리에서는 아주 쉽게 파비콘을 등록할 수 있다.
[관리자 모드] - [환경설정] - [기타설정]에 가시면 파비콘을 업로드 하는 메뉴가 있습니다. 그곳에서 간단히 업로드하면 바로 적용 됩니다 ^^
실제로 이렇게 업로드를 하고 skin.html 을 들여다보면
<link rel="shortcut icon" hrefhttp://cfs.tistory.com/custom/blog/9/93368/favicon.ico?randomseed=242616278.ico" />
라는 위에와 똑같이 파비콘을 위한 코드가 추가된것을 확인할 수 있습니다.
마지막으로 저는 티스토리에 적용하는것에 대해서 조금은 대충 적었는데...
어쩌다보니 참으로 좋은 곳을 한군데 찾았습니다 ^^;
http://frearl.tistory.com/3
위의 링크로 가시면 티스토리에 파비콘 적용법을 자세히 아실수 있을 겁니다 ^^
이제까지 파비콘을 만들고 적용하는 법을 알아보았습니다. 즐거운 인터넷 생활 되세요 ^^
'HTML & Script' 카테고리의 다른 글
| 레이어 관련 스크립 참고 (1) | 2008.01.28 |
|---|---|
| document.all 문제 해결법 (1) | 2008.01.26 |
| lib.validate.js (2) | 2007.12.07 |
| ime-mode의 옵션 (1) | 2007.12.05 |
| meta (1) | 2007.09.28 |