포토샵
포토샵 강좌
무료폰트
포토샵 브러쉬
포토샵 단축키
파일 형식
웹폰트
일러스트레이터
일러스트 이미지
웹디자인 소스
웹디자인 기능사
플래시
플래시 비디오 파일
액션스크립트(Action Script)
나모 웹에디터
드림위버
File 메뉴
Edit 메뉴
View 메뉴
Insert 메뉴
Modify 메뉴
Text 메뉴
Commands 메뉴
Site 메뉴
Window 메뉴
Help 메뉴
홈페이지 메뉴
파비콘(Favicon)
파비콘(Favicon) 만드는 방법과 홈페이지에 적용하는 방법
파비콘(Favicon)은 Favorite Icon을 줄여서 부르는 말입니다. 인터넷 주소창이나, 즐겨찾기에 웹사이트를 추가하였을때 보이는 작은 아이콘을 말합니다.

아래 그림처럼 주소창앞에 조그만 아이콘으로 보여집니다.




파비콘을 만드는(준비하는) 방법과 이를 홈페이지에 적용하는 방법에 대해서 설명해 보겠습니다.

1. 파비콘 만드는 방법

포토샵과 같은 이미지 편집 프로그램을 다룰 수 있다면 직접 만들면 됩니다.

16*16 사이즈로 만들고, 저장할때 확장자를 ico로 지정해 주시면 됩니다.

이미지 편집 프로그램을 다룰 수 없는 경우에는 인터넷상에 파비콘으로 사용할만한 이미지들이 많으니 다운받으면 됩니다.

홈짱닷컴의 파비콘은 http://www.famfamfam.com/lab/icons/silk/ 여기에서 그냥 하나 골라 썼습니다.

근데 파일들이 크기는 16*16이 맞는데 확장자가 ico가 아니고 png죠?

이럴때는 이미지 뷰어 프로그램으로 열어서 다른 이름으로 저장해서, ico파일로 변환하면 됩니다. 대부분의 이미지 뷰어 프로그램이 ico파일로 변환하는 것을 지원합니다.

암튼 직접 만들든, 인터넷에서 다운 받든 파비콘 파일을 준비합니다.

홈짱 닷컴은  homejjang.ico 이라는 이름으로 파일을 저장했습니다.

2. FTP를 이용해서 준비한 파비콘 파일을 서버에 올립니다.

홈짱닷컴의 경우 그냥 루트 서버에 올렸습니다. 그럼 파비콘 파일의 경로는 /homejjang.ico 가 되겠죠?

3. CSS를 이용해서 홈페이지에 적용시킵니다.

<link rel="shortcut icon" href="/homejjang.ico">

아주 간단하죠?
Related links
웹상에서 바로 파비콘을 생성할 수 있는 사이트, 다른 사람이 만든 파비콘을 수정해서 사용할 수도 있다.
유저들이 만든 다양한 파비콘 다운 가능

3D 파비콘이 필요하면 여기로...
Copyright © Homejjang.com All rights reserved.