티스토리 뷰

자료/유용한 정보

홈페이지에 파비콘(아이폰) 추가하기

네오블루 2009. 2. 16. 07:57

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


사용자 삽입 이미지

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

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

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

사용자 삽입 이미지

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


사용자 삽입 이미지

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

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

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

 

출처:http://techblog.tistory.com/entry/Favicon