파비콘(favicon,페비콘)제작 및 포토샵(photoshop) ICO 플러그인(plug-in)

즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창에 조그만 아이콘으로 표시되어 있다.  

아이콘 에디터로 16x16 크기의 적당한 아이콘을 만든 후 그 이름을 favicon.ico로 한 다음

웹 사이트의 루트 디렉터리에 갖다 넣으면 된다.

 

[네이버 지식백과] 파비콘 [favicon] (IT용어사전, 한국정보통신기술협회)

 

네이버 지식백과에 나온 설명입니다. 말 그대로 즐겨찾기 아이콘이죠.

홈페이지에 앞에 이게 없으면 뭔가 허전하더라구요.

그래서 파비콘을 만들고 설정하는 법을 적어보겠습니다.

우선 포토샵에선 파비콘 파일형식인 ICO포맷으로 이미지를 저장할 수 없습니다.

그래서 포토샵에서 ICO포맷을 저장할 수 있게 하는 플러그인을 먼저 설치하도록 하겠습니다.

첨부해둔 플러그인 파일을 다운받으세요.

ICOFormat.8bi(32비트)와 ICOFormat64.8bi(64비트) 두 가지 입니다.

운영체제에 따라 다르니 맞게 사용하시면 되고, 아래 경로로 복사하세요.

32비트 - C:\Program Files(x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats
64비트 - C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats

​복사를 하셨다면 포토샵을 다시 시작합니다.

파비콘의 픽셀 크기는 16 × 16입니다.

 

가로, 세로 16의 새로운 이미지를 만드신 후 이미지를 그리세요. 

save as 옵션박스에서 파일형식 드랍다운 메뉴를 보시면 ICO포맷으로 저장 할 수 있습니다.

 

디자인한 아이콘은 favicon.ico로 저장하셔서 웹 사이트에 복사 해줍니다.

 

네이버 백과사전 설명처럼 그냥 웹 사이트의 루트 디렉터리 넣어주거나 루트가 아닌 다른 경로에 넣었을 경우, 

 

웹 사이트의 공통으로 적용되는 head 부분에 <link rel="shortcut image" href="/파일경로/favicon.ico">  

이렇게 마크업 해주면 됩니다.

 

그러면 파비콘 적용 끝!