2009년 2월 15일 일요일

홈페이지에 파비콘 추가하기 (Addiong favicon to the web page)

웹 브라우징을 하다 보면 주소창의 주소 왼쪽에 표시되는 작은 아이콘을 favicon이라고 한다.


83097f2a0590c8bd375003852b4200ab.jpg

16x16 사이즈로 주소창이나 탭을 여러개 열 때 탭의 왼쪽에도 표시된다. 최근 대부분의 웹브라우져는 GIF나 PNG로 된 파비콘도 지원하지만 (유감스럽게도) 아직까지 가장 큰 점유율을 가지고 있는 IE는 Microsoft Icon Format인 ICO 파일만을 지원한다.

에디터로 직접 그릴수도 있지만 GIF, PNG, JPG로 된 이미지를 ICO로 변환하는게 훨씬 쉽게 파비콘을 만들어 줄 수 있다.

Favicon Generator 에서 파비콘을 직접 그리거나 다른 포맷의 이미지를 ICO포맷으로 변환을 할 수 있다.4a140d06a643b6cdf78bb3c389d9d9da.jpg

웹 브라우져에서 Favicon generator로 가면 다음과 같은 화면을 볼 수 있다. 여기서 1의 버튼을 눌러 변환하려는 이미지 파일을 선택하고 2번의 Create Favicon 버튼을 눌러주면 된다. 그러면 아래와 같은 화면이 나오게 된다. 여기서 동그라미로 표시된 체크박스는 원본이미지의 가로,세로 비율을 유지할것인가 여부이다.


d6c1c252335b03f33efcf824dae52718.jpg

여기서 Download the generated favicon 링크를 눌러 파일을 다운로드 받는다. 이 다운받은 파일을 자신의 홈페이지의 root directory (제일 초기화면의 index.html이 들어있는 디렉토리)에 넣어준다.

그리고 index.html 파일의 헤더부분(즉 <head> ....... </head> 사이)에 위의 두 줄을 복사해서 넣어주면 된다.

이제 자신의 홈페이지를 접속해 보면 주소창 왼쪽에 방금 만든 파비콘을 볼 수 있을 것이다.

블로그코리아에 블UP하기

댓글 3개:

  1. trackback from: 홈페이지에 파비콘 추가하기
    http://favicon-generator.org/



    파비콘 추가방법이 심플하게 정리되어 있네요. ^^



    ----------------------------------------------------------------------------------------





    웹 브라우징을 하다 보면 주소창의 주소 왼쪽에 표시되는 작은 아이콘을 fav

    답글삭제
  2. @흑흑 - 2009/03/27 18:18
    정확하게 어떻게 하셨는데 안되시는지 말씀해주셔야 해결책을 찾아 볼 수 있을거 같습니다.



    아마도 제일 먼저 확인해 보셔야 할건 favicon.ico 파일의 위치입니다. 자신의 홈페이지의 root directory에 있는지 확인 해 보세요.

    답글삭제