본문 바로가기
생활일기/tip tech

Favicon에 대해

by 신일석 2008. 3. 3.

사용자 삽입 이미지
website icon, page icon 또는 urlicon이라고 불리기도 하는 Favicon은 주소입력창, 북마크, 그리고 IE8 등에서 지원하는 탭의 제목에 사용됩니다.

원래 웹서버의 최상위 디렉토리에 favicon.ico로 사용되어 지금도 ico포맷을 고수하고 있지만 png나 애니메이션 gif를 지원하는 브라우져도 있습니다.

말 그대로 즐겨찾기에 사용되는 아이콘으로 댓글에 사용되기도 합니다.




Favicon제작 방법을 몇가지 소개 합니다.


포토샾에서 제작하기
포토샾에서 Favicon을 만들기 위해서는 포토샾 플러그인이 필요합니다.
플러그인 다운로드 - ICOFormat-1.6f9-win.zip (관련사이트 http://www.telegraphics.com.au/sw/)


다운로드 받은 파일의 압축을 풀어 플러그인을 포토샾에 설치합니다.
포토샾에서 File>New를 선택하여 아이콘을 제작합니다.
이때 캔바스의 크기는 16x16으로 작업하며 이키지를 크게 하여 작업할 경우 비트맵의 특성상 16의 복수배수(예를 들면 4배의 경우 64x64) 크기로 제작해야 리사이즈시 이미지가 매끄럽게 저장됩니다.
아이콘 제작이 완료되면 File>Save as에서 ico 포맷으로 저장하면 됩니다.

웹에서 제작하기
먼저 웹마스터나 프로그래머에 잘 알려진 사이트인 http://tools.dynamicdrive.com/favicon/에서 만들 수 있습니다.


웹사이트에 Favicon 적용하기
1. 16x16 크기의 이미지를 준비합니다. 사용가능한 이미지 포맷은 gif, jpg, png 그리고 bmp입니다.
※ Favicon파일은 16 x 16의 크기로 만들어 져야 즐겨찾기나 검색창에 보여지게 됩니다.
2. http://tools.dynamicdrive.com/favicon/ 사이트를 방문 이미지를 불러옮니다.
3. Create Icon버튼을 선택하여 ico파일포맷으로 변환합니다.
4. Download Favicon을 선택하여 아이콘을 다운로드 받습니다.

홈페이지에 Favicon 적용하기
1. 홈페이지 최상단(http://mysite.com/favicon.ico)에 Favicon 파일을 업로드 합니다.
2. 홈페이지에 링크를 추가합니다.

http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

※ 반드시 사이에 넣으세요.
http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
를 사용해도 됩니다.
※ xhtml사용시 "/>" 또는 ">"으로 태그를 닫아야 합니다.
그외 Favicon에 대해 좀 더 섬세한 작업을 진행하려면
http://www.rw-designer.com/online_icon_maker.php



그외 홈페이지 즐겨찾기 추가버튼 만들기 입니다.
※ 반드시 사이에 넣으세요.

http://내홈페이지/favicon.ico">
내 홈페이지


페이지에 링크는 body태그 사이에 넣으세요.
즐겨찾기 추가


이렇게 하면 '즐겨찾기 추가'를 선택하면 자신의 홈페이지가 즐겨찾기에 추가됩니다.

참고 : http://en.wikipedia.org/wiki/Favicon