인터넷 서핑을 하다보면 아래와 그림의 빨간 박스처럼 아이콘이 보입니다. 이를 파비콘이라고 하는데요.
파비콘 Favicon 이란? 즐겨찾기 아이콘의 줄임말 이랍니다. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창에 조그만 아이콘으로 표시되어 있습니다. 아이콘 에디터로 16x16 크기의 적당한 아이콘을 만든 후 그 이름을 favicon.ico로 저장한 다음 웹사이트의 루트에 갖다 넣으면 되는 아주 쉽고도 간단한 작업? 이지만 처음에 제가 느꼈던 것처럼 뭔지 몰라서(심지어 저는 '인터넷 창 위에 조그만한 그림' 이라며... 검색했더랬죠...^^;;) 접근 자체를 못하시는 분들을 위해 글 올립니다. 그럼 ico파일을 만들어서 티스토리에 적용시키는 작업에 착수해 보겠습니다.
1단계. ico 파일로 아이콘 만들기
ico파일을 만드는 여러가지 방법들이 있지만, 그중 가장 편하고 제가 애용하는 방법 입니다.
첫번째.일단 원하시는 이미지 파일을 선택합니다. 원하시는 이미지가 없다면 일러스트나 그림판에서 간단히 만드시면 되구요.. 이왕이면 본인의 블로그 주제를 대변하는 이미지 이면서 간단한게 좋습니다. 아시다 시피 실제 보여지는 이미지는 새끼손톱보다 작은 크기임으로 복잡하 이미지나 많은 글자를 포함하는건 과감히 버리십시오.
두번째.이미지가 준비되셨다면 이제 '파비콘 제너레이터 http://www.degraeve.com/favicon/' 사이트로 들어갑니다. 이곳에서 준비한 이미지를 축소시키고 일정부분 수정을 거져 파비콘 파일이 만들어 집니다. 사이트로 들어가시면 아래 별표그림 대신 애플그림이 견본으로 있습니다. 별표그림은 제 파비콘 만들면서 캡쳐한 그림이오니 별푝림 안뜬다고 놀라지 마세요 ^^;;
세번째.이제 위에 빨간번호 순서대로 따라오시면 됩니다.
1. 'Browse..' 버튼을 눌러 이미지를 선택하면 'Browse..'버튼 좌측에 이미지의 경로가 표시됩니다.
2. 그 우측에 'Upload image' 버튼을누릅니다. 그럼 창이 하나 뜨면서 좌측처럼 불러온 이미지를 보실 수
있습니다. 남색 점선을 드래그 하시면 원하는 크 기만큼 자르실 수 있습니다.
원하는 영역 선택이 끝나면 'Crop picture' 버튼을 눌러 이미지를 불러옵니다.
3. 이미지가 보이시나요? 그럼팔레트에서 적당한 색을 골라 보정작업을 하신 후 'Make favicon' 버튼을
누릅니다. 좌측처럼 실제 인터넷 브라우저 위에 보이시는 그 작으마한 크기만하게 이미지가 구현됩니다.
4. 적당하다 싶으시면 아이콘에 마우스 우클릭하셔서 그림으로 저장(Save picture as...) 해 주시구요. 이때 확장자는 자동으로 ico로 저장됩니다. 보정이 필요하시면 팔레트 이용해서 재 작업 해 주세요.
이렇게 순식간에 ico 파일을 만들어 보았습니다. 이제 이 조그만 녀석을 브라우저 위에 띄워 보도록 할게요. ^^
2단계. 티스토리에 파비콘을 입히자!
이제 티스토리에 위에서 만든 아이콘을 입혀보겠습니다.
먼저, 티스토리 관리자 화면의 좌측 카테고리중 맨 아래에 '환경설정'의 '기본정보'로 들어갑니다.
두번째. 아이콘에 보면 짜잔~! 파비콘이라고 보일겁니다. 거기에서 찾아보기 누르시고 저장하면 끝.
매우 간단하죠! 이제 저장이 잘되었나 확인하고 블로그로 돌아가서 위를 쳐다보는데... 멋지게 모습을 드어내 줄수도 있구요, 티스토리 설정이 조금 달라서 적용이 되지 않을 수도 있습니다.-0-
3단계. 티스토리 파비콘 설정문제에 봉착하였을때 해결방안
애써 아이콘도 다 만들어는데 적용이 안된다며 애꿎은 익스플로러 아이콘을 보며 낙심하시지 마시구요...(제가 처음에 그랬답니다.;;;) HTML/CSS를 아주 살짝만 건들여 주면 됩니다. 조금더 힘을내서 따라와 주세요 ^^
사실상, 파비콘 제너레이션 페이지에 보시면 위에 박스처럼 영어로 뭐라고 쓰여있습니다. 루트디렉토리 헤드에 아래 코드를 넣으라며...그런이야기 입니다.
다시, 티스토리 관리자 화면의 '기본정보'로 들어갑니다.
여기서 아이콘에 마우스를 올려놓고 우클릭을 한후 속성창에 들어갑니다. URL주소를 복사하신 후 메모장에 잠시 옮겨 놓습니다.
두번째, HTML.CSS편집으로 들어간 후, skin.html에서 [ctrl + F]를 눌러 <head>를 찾습니다.
<head> 아래에 다음과 같은 코드를 입력합니다.
다 끝났습니다. 여기서 저장 반드시 체크한 후 블로그로 들어가 확인해 보세요 ^^
