홈페이지의 마지막 화룡점정이라 할 수 있는 파비콘을 만드는 법을 소개할까 합니다.
파비콘이란 확장자가 .ico로 아이콘파일이라고도 하며 홈페이지에서는 주소줄 앞에.. 데스크탑에서는 실행 아이콘으로 쓰여지는 이미지를 말합니다.
파비콘을 만드는 방법에는 여러가지가 있는데 그중에서도 간단하고 심플하게 만들어 주는 x-icon 이라는 웹 서비스가 있습니다.
64x64, 32x32, 24x24, 16x16 크기의 아이콘을 선택하면 한번에 아이콘 파일을 만들어 줍니다.
이미지를 미리 준비해서 임포트하여 만드는 방법과 직접 캔버스에 그려서 만들어내는 방법이 있습니다.
직접 캔버스에 그리는 방법은 각종 브러쉬 도구와 색상도구가 있으므로 한번 해보시면 이해가 쉬울것 같고 저는 기존의 이미지를 불러와서 .ico파일로 만드는 방법을 설명하도록 하겠습니다.
x-icon으로 파비콘 만들기
먼저 서비스를 제공하는 http://www.xiconeditor.com/ 에 접속을 합니다.
위와 같이 x-icon editor화면이 나오면 우측 상단에 있는 "Import"버튼을 클릭합니다.
그러면 모달창으로 위와 같은 화면이 나옵니다.
UPload 버튼을 클릭하여 데스크탑에 있는 준비된 파일을 선택하면 됩니다. 준비된 이미지 파일은 가로 X 세로의 비율이 1:1이어야 하고 GIF, JPG, PNG, BMP, ICO파일 형식이어야 합니다.
파일을 불러온 모습이네요.
자동으로 4가지 크기의 아이콘이 생성됩니다. 만들고자하는 사이즈를 선택하고 "OK"버튼을 클릭하세요
그러면 본 화면에서 임포트되어 변환된 4개의 이미지를 볼 수 있습니다.
"Preview"버튼을 누르면 해당 파비콘이 어떻게 적용이 되는지에 대해서 샘플로 보여줍니다. 원하는데로 잘 보인다 싶으면 Export버튼을 누르세요.
"Export"버튼을 누르시면 아래와 같은 모달창이 한번더 뜹니다.
마지막으로 "Export your icon"버튼을 누르면 다운로드가 됩니다.
아래의 <link rel="...... 코드를 홈페이지 <HEAD></HEAD> 사이에 넣으시면 적용이 됩니다.
