상세 컨텐츠

본문 제목

Favicon.ico 아이콘 만들기

프로그래밍/스크립트

by 라제폰 2009. 2. 6. 18:13

본문

MS Explorer의 Favorites(즐겨찾기) 메뉴에서 눈길을 끌어 재방문을 유도하는 방법으로 즐겨찾기 아이콘 위치에 독특한 로고를 덧붙여 주는 것을 들 수 있다. Explorer에서 메뉴를 눌렀을 때 주르륵 나타나는 Channels(채널) 아이템 옆의 로고들을 자신만의 로고로 바꾸는 것이다.

이와 같은 작은 아이콘은 "favicon"이라 하며 MS Explorer 5.0 이상에서만 동작한다. 그러므로 Netscape 또는 구버전의 Explorer를 사용하고 있는 이용자는 이런 favicon을 보지 못할 것이다.

반면 Explorer 5.x의 사용자가 북마크에 특정 페이지를 추가하려 할 때, explorer는 "favicon.ico"라는 이름의 특별한 아이콘을 찾는다. 그게 있으면 Explorer는 즐겨찾기 메뉴와 위치 막대에 있는 사이트 이름 옆에 기본적인 Microsoft 아이콘 대신 favicon을 사용할 것이다. 이용자가 그 아이콘을 데스크톱과 작업막대에 위치시킬 때에도 마찬가지이다.

이 아이콘은 정확하게 가로 세로 각각 16픽셀의 크기이다. 좀 더 크게 만들 수도 있지만 실제 사용되는 것들을 자세히 살펴보면 다른 크기의 favicon은 사용되고 있지 않다는 것을 알 수 있다. 가장 안전한 방법은 정확하게 16x16 크기를 사용하는 것이다. 그보다 더 크거나 작다면 일반적으로 브라우저는 무시해버릴 것이다. 또한 16 윈도우 색상을 사용하는 게 좋다. 이 경우에도 보다 많은 색상을 사용하여 정교한 아이콘을 만들 수도 있지만 16 색상을 사용하는 것이 가장 안전한 방법이다.

favicon을 만드는 방법으로는 두 가지가 있다.

첫번째는 BMP 또는 GIF 등 기존에 갖고 있던 이미지들을 이미지 처리 소프트웨어를 이용하여 아이콘으로 변환하는 방법이다. 몇몇 아이콘 변환기들은 비트맵을 .ico 화일들로 제대로 변환하지 못하지만, Irfanview에서 만족스러운 변환 S/W를 무료로 구할 수 있다.

또 다른 방법은 전용 아이콘 편집기를 사용하는 것이다. Microsoft Visual Studio에 편집기 한 종류가 있으며, www.favicon.com에 있는 온라인 Java 편집기를 써도 된다. 사실 처음부터 아이콘 편집기를 이용하여 제작하는 것이 기존의 이미지를 변환한 다음에 필연적으로 나타나는 버그들을 고치는 것보다 더 빠르다.

제작된 .ico 화일을 저장할 때 "favicon.ico"로 이름을 붙여야 한다. 그것이 Explorer가 찾는 기본 아이콘이기 때문이다. 만일 여러 페이지에 각기 다른 아이콘을 지정해주고 싶으면 각 아이콘마다 다른 이름을 붙이면 되는데, 모두 확장명을 .ico로 해야 한다.

Explorer가 기본 favicon.ico 파일을 선택하게 하려면 사이트의 HTML 페이지들을 포함하고 있는 메인(루트) 디레토리에 그 파일을 복사하면 된다. 이것으로 favicon.ico를 사이트와 연관시키는 작업은 완료되었다. 이제 방문객이 이 사이트를 Explorer로 북마크할 때마다 방문객의 캐쉬에 favicon.ico가 복사되어 지정된 자리에 보이게 될 것이다.

가끔 다른 기교를 부려보고 싶을 수도 있다. 예를 들어 특정 페이지에 다른 아이콘을 연결시키고 싶으면 그 페이지에는 다음과 같이 LINK 태그를 사용하면 된다.



위의 태그를 쓰면 방문객이 이 페이지를 북마크할 때 favicon.ico 대신 mypage.ico가 보이게 될 것이다. 특정한 절대 경로를 다음과 같은 방법으로 브라우저에 직접 알려줄 수도 있다.



물론 이를 구현하는 데는 문제점도 있다. 만일 자신의 사이트에서 favicon을 검사한다면 위의 두 아이콘 중 한 개만 보일 것이다. 일단 북마크했었던 사이트는 리스트에서 제대로 보이지가 않는다. 캐쉬에서 페이지들을 삭제하고 즐겨찾기 메뉴에서 모든 리스트들을 삭제한 후, 재부팅하여 이전에 북마크해 놓았던 사이트들을 다시 북마크해도 새로 제작한 아이콘이 나타나지 않을 수도 있다. 이럴 경우에는 이제껏 이 페이지를 북마크한 적이 없는 다른 사람의 도움을 얻는 것이 좋다.(그 사람이 사이트를 북마크해 본다면 favicon 아이콘이 제대로 보이는지 확인할 수 있다).

또 다른 잠재적인 문제점은 .ico 파일들을 아예 지원하지 않는 웹 호스트도 있다는 것이다. 이 경우에는 그 회사에 연락해서 .ico 화일들을 지원해 달라고 요청하면 된다.

여기서 제시한 대로 따라 하고 나면 favicon 아이콘이란 그리 어렵지 않다고 생각하게 될 것이다. 다만 아이콘 편집기를 사용하여 아이콘을 제작하는데 익숙해지는 것과, 변화된 이미지에 관련된 버그를 해결하는 것에만 약간 시간을 투자하면 된다. 결국 비교적 적은 노력으로 사이트에 IE5에서의 맞춤형 마무리 장식을 해 놓을 수 있는 것이다.


관련글 더보기