우선.. 파비콘이 적용된 예를 함 보자..
위와 같이 브라우즈 주소창에 또는 탭에.. 그리고.. 즐겨찾기 목록에 파비콘이 생성된다.
쫌 있어보이는 사이트 또는 블로그를 만들 수 있고, 자신만의 개성을 최대한 살릴수 있는 조그마한 팁일 것이다.ㅎ
자.. 그럼 우선 파비콘 아이콘을 만들어 보자..아이콘을 만드는 방법은 포토샵등과 같은 프로그램을 이용하여 아이콘을 직접만들거나, 이미지를 만들고, 아이콘으로 변경하는 프로그램을 변환하는 방법이 있는데 필자는 포토샵에서 필요한 아이콘의 형태를 기본적으로 만들어서, jpg나 gif로 저장하고,
이라는 파비콘을 가장 안전하고, 손쉽게, 그리고 깔끔하게 생성시켜주는 사이트를 이용한다.
물론 무료로 사용할 수 있도록 되어 있고, 영문사이트이다. 영어에 자신이 없드라도 크게 걱정없이 한두번만 만져보면 바로 제작이 가능할 것이다. 이 사이트 외에도.. 꽤 많은 사이트에서 파비콘 생성을 도와준다. 한번 검색해보시길..^^
참고, 이 사이트에는 파비콘 생성 말고도 꽤 재미있는 기능들이 많이 제공하고 있다.. 시간나면 찬찬히 공부해보는 것도 좋을 것이다..ㅎ
1. 포토샵에서 생성한 파비콘으로 만들 이미지를 찾아보기해서 고른다.
참고, 이미지가 없다면, 여기서 직접 도트노가다 해가면서 만들 수 도 있다.
2. upload image버튼을 눌러 선택한 이미지를 업로드 시킨다.
3. 업로드가 끝나면, 위와 같은 화면이 보이고, 여기서 원하는 만큼 크롭영역을 정한다. 4. 영역선택이 끝나면, Crop picture 버턴을 클릭한다.
5. Crop picture 버턴을 클릭하면 원래화면으로 돌아오면서, 크롭된 이미지도 같이 들어온다. 여기서 붓으로 색을 변경하거나, 정리할 부분 정리해서 이미지를 완성하고, 배경을 투명하게 만들려면, 색상 팔래트 좌측상단(5번 위치)에 있는 투명색을 선택하고, 붓으로 투명하게 만들 부분을 칠하면 위의 이미지처럼, 배경이 투명으로 바뀐다.
6. 정리가 마루리 되면, Make Favicon! 버턴을 클릭한다.
7. Make Favicon! 클릭하면, 바로 아래 연두색 화면 중간에 조그마한 파비콘 아이콘 이미지가 보이고 이
이미지를 파비콘 아이콘으로 저장하기 위해서 이미지위에 마우스를 위치시키고, 마우스 오른쪽 버턴을 눌러 메뉴에서 다른이름으로 사진
저장 메뉴를 클릭한다. 8. 다른 이름으로 사진 저장에서 원하는 저장위치를 선택하고, 이름과 확장명은 변경하지 않은
상태로 저장하기 버턴을 누르면 된다.
파일명은 favicon.ico 라고 저장이 되고.. 파일명과 확장명은 변경하지 않은 상태에서 여러분들의 웹서버에 업로드 시키면 된다.
자.... 가장 간편하게... favicon.ico 파일을 생성시켜봤다..
물론 이 사이트에서 만들어주는 아이콘이 16x16 사이즈이다. 32x32도 작동하지만, ie에서는 한번씩 오작동하거나, 아에 나타나지 않을 가능성이 다분히 높기 때문에 가급적이면, 16x16사이즈를 적극 추천한다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<link rel="shortcut icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />
<title>서관덕의 시간이 머문 작은공간</title>
</head>
<head></head> 사이에. <link rel="shortcut icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://사용자도메인명/favicon.ico" type="image/x-icon" /> 위 같이 붙여넣고, 여러분들의 도메인주소와 경로에 맞게 설정해주면 끝난다.. 경로는 풀ULR 주소를 입력해도 좋고 href="/favicon.ico" 이렇게 절대경로를 이용해서 적용해도 된다... 두개의 코드를 이용하는 것은 한번 호출했을 때, 작동하지 안될 가능성 때문에.. 두번 호출하는 것이다.
한마디로.. 안전빵..ㅋ
셋팅이 끝나면, 저장해서, ftp를 이용해서 여러분들의 웹계정에 업로드 시켜주고, 현재 열려있는 모든 브라우즈를 종료하고, 다시 접속하면 정상적으로 파비콘이 보일 것이다.
만약.. 위와 같은 방법으로 생성하고, 코딩했는데 보이지 않는다면,...ㅡ,.ㅡ;
참고. 이넘의 파비콘이.. 브라우즈 환경이나, 시스템환경에 쪼금 민간한넘이라....
참고. ie6에서는 이 파비콘이 제대로 작동하는 꼬라지를 못봐서... 절대 비추천 브라우즈...ㅡ,.ㅡ;
가능하면, 여러분들의 인터넷 브라우즈를 ie7 이상 업그레이드 시키는 것을 추천한다.ㅋ
참고. 여러분들 컴에서만 안보일수도 있다.
안보이는 경우.. 이유가 여러가지 있을 수 있다..
예를들어, 위에서 언급했듯이 브라우즈가 ie6인 경우.ㅋㅋ... 생성한 파비콘이 약간 비정상적일 때.. 사이즈가 클때..인터넷 캐시처리 문제.등등등 여러가지 이유가 있겠지만.... 직접 제작하지 않는한.. 대부분 보인다고.. 생각해도 무방할 것이다...라고 호언장담은 못합니다.ㅋ
파비콘이 제대로 작동하는지 확인해보고 싶다면, 간단하게.. 주소창에 http://여러분들도메인명/favicon.ico 이라고 입력하고 브라우즈 창에 정상적으로 아이콘이 타나면, 여러분들 컴터에서는 안보이더라도, 다른 사용자 컴에서는 보인다고 확신하시면 된다.
내컴에서도 파비콘을 강제적으로 보겠다면... favicon refresher라는 프로그램을 이용해서 강제로 리플래쉬시켜서 보이게 할 수도 있다.
이것으로 멋진 홈페이지 제작에 조금이라도 도움이 될만한 파비콘 생성 및 설치방법에 대해서 알아보았다..파비콘이란게... 이리저리 설정값에 민감하게 작동하는 넘이라...
너무 서두르지 마시고.. 찬찬히 만들어 보시길..^^
출처 : http://esajin.kr/28
'To Know' 카테고리의 다른 글
| Best Forum Software – vBulletin VS phpBB (0) | 2011.06.20 |
|---|---|
| Welcome to oohEmbed! (0) | 2011.04.26 |
| 트위터 API(Twitter API) 사용하기 (0) | 2011.01.14 |
| 영문 직급 표기법 (0) | 2010.07.01 |
| Windows XP CD-KEY 변경 프로그램 (0) | 2010.05.13 |