사이버 아이덴티티~ 파비콘(Favicon)을 만들어보자! :: 2007.02.06 01:06



우리가 웹서핑을 하다 보면 주소표시줄 왼쪽에 아래와 같은
익스플로러 마크의 아이콘을 만나는것이 대부분 입니다.
사용자 삽입 이미지

이런 투박한 아이콘 말이죠...




그런데 웹 브라우저를 익스플로러 7 이상이나 파이어폭스, 그리고 기타 프로그램을 사용하시는 분들은
 특정 사이트에서 이 익스플로러 마크의 아이콘이 나타나야 할 부분에
전혀 다른 아이콘이 나오는 경우가 있을겁니다.
(익스플로러6는 지원이 되기는 하지만 버그때문에 안나옵니다-_-)
사용자 삽입 이미지사용자 삽입 이미지
사용자 삽입 이미지사용자 삽입 이미지
이렇게 말이죠... 이것을 흔히 파비콘(Favicon)이라고 불리는 것들입니다.


사용자 삽입 이미지

제 즐겨찾기 입니다 -_-;

이렇게 보면 파비콘이 설정된 것과 안된것의 차이를 느낄 수 있죠^^
파비콘이 설정된 즐겨찾기 같은 경우에는 아무래도 한눈에 들어오기 마련입니다.



사용자 삽입 이미지

파이어폭스 탭 입니다.

그리고 이렇게 상으로도 확인할 수 있구요^^


요즘 기업 쪽에서는 자신들의 기업 로고를 파비콘으로 채용하고 있는 경우도 있습니다.
(저기 국민은행 같은 경우 말이죠...)

남들과는 조금이라도 더 다르게...
개성의 시대... 사이버 아이덴티티라는 코드와 더불어 파비콘이 확산되가고 있습니다.
사용자 삽입 이미지

이렇게 다른사람 방명록에 글을 남길때도 작동되고...

사용자 삽입 이미지

자신의 블로그에서도 작동합니다.


자 그럼 파비콘(Favicon)을 만들어 자신의 개성을 표현해 볼까요?

준비물
16×16사이즈(256색)의 그림파일과
make_icon.zip

아이콘 제작기 입니다.


파비콘의 사이즈는 가로 세로 16씩 입니다. 색상을 256색으로 한정한것은...
그 이상의 색상의 경우 방명록과 댓글에서 파비콘이 표현될때...
익스플로러6에서 제대로 표현을 못해주어서 엄청 밉게 나옵니다;;;

그리고 .jpg와 같은 그림 형식이 아니라 .ico
우리가 윈도우 상에서 보는... 단축아이콘의 아이콘모양의 바로 그 파일입니다.
(그래서 ico로 만들어 주는 프로그램이 필요함)

make_icon.zip을 받으시고 압축을 풀면 aicon.exe파일이 있습니다.
이것을 실행해서... File->Open으로 준비한 16×16사이즈(256색)의 그림파일을 불러옵니다.
그리고 File->Save as Single Icon 을 눌러 저장하면 파비콘이 완성됩니다.

완성된 파비콘은 티스토리와 같은 블로그 에서는 간단하게 업로드 및 설정을 할 수 있습니다.
(티스토리의 경우 환경설정->기타설정)

일반 사이트에서의 이용법은... index.html 파일을 열고 <head></head> 사이
<link rel="shortcut icon" href="http://자신의 파비콘이 위치한 주소">
이 코드를 삽압하시면 됩니다.

간단히 예를 들어 홈페이지 루트에 favicon.ico를 올려놓았다면
 <link rel="shortcut icon" href="http://kaicnet.net/favicon.ico"> 가 되겠죠?


자 그럼 이제 적용된 모습을 보시기만 하면 됩니다^^
사용자 삽입 이미지

제 파비콘 입니다.


간담히 제 파비콘을 설명하자면... 정보의 소통을 간략하게 표현한것입니다.
(쉽게말해서... 업로드/다운로드;;)
지금 이 블로그, 위니코리아, 위니쉐어, 쉐어코리아 모두 같은 파비콘을 채용하고 있습니다^^



  • BlogIcon Jweb | 2007.02.06 09:47 신고 | PERMALINK | EDIT/DEL | REPLY

    예전부터 만들고 싶다는 생각은 많이 했었는데
    미적 감각이 너무 유니크 한 나머지... 후임한테 부탁해서 만들어 나가야겠군요.

  • BlogIcon LETZROCK | 2007.02.15 10:13 신고 | PERMALINK | EDIT/DEL | REPLY

    좋은 정보 감사합니다. 그런데 파비콘과 블로그 아이콘과는 별게인가요? 티스토리나 테터툴즈의 기본 플러그인을 보니 그런것 같네요.

    • BlogIcon KAIC | 2007.02.16 10:42 신고 | PERMALINK | EDIT/DEL

      에... 뭐라고 해야하나...결론적으로 말하면 파비콘과 블로그 아이콘은 별개입니다만 저같은 경우는 통일해서 사용하고 있습니다.
      파비콘은 모든 웹페이지에 적용할 수 있는 기술(?)이구요.(그냥 html로 만든것도 파비콘을 적용할 수 있습니다)
      주소표시줄에 보시면... 주소 왼쪽에 표시 되는 아이콘을 말하는 것이구요. 아니면 즐겨찾기에 나오는 아이콘을 말하는 것입니다.
      블로그 아이콘은 gif로 된것으로... 이것은 내 방명록 혹은 다른 사람의 방명록에 글을 남길때나 그때 작동하는 것입니다.

  • BlogIcon 아가별빛 | 2007.05.18 16:23 신고 | PERMALINK | EDIT/DEL | REPLY

    저 질문좀 하고싶은데요;; 티스토리 환경설정-기타설정에서 파비콘 파일 등록했는데 보이질 않아서요 도저히 모르겠어요;; 스킨을 편집해야 되는건가요?? 알려주세요 ㅠㅠ

    • BlogIcon KAIC | 2007.05.19 06:16 신고 | PERMALINK | EDIT/DEL

      사용하시는 인터넷 브라우저가... 익스플로러6 이라면... 90%는 안나온다고 보시면 됩니다 -_-; 이게... 버그라고 하더라구요. 익스7을 사용하시거나... 파이어폭스에서 보입니다...

  • BlogIcon 토실이 | 2011.10.26 16:40 신고 | PERMALINK | EDIT/DEL | REPLY

    이 글 퍼가도 될까요?? 물론 출처 남기도록 하겠습니다.. 허락해 주세요~!!
    퍼 갈 사이트는 홈페이지란에 적어 두었습니다..

  • 12345bike | 2012.02.12 13:27 신고 | PERMALINK | EDIT/DEL | REPLY

    안녕하세요 블러그를 꾸미고 있는데
    새로운 용어가 있어 검색하다 들렀습니다.

    잘둘러보고 출처를 남깁니다.(참고로 펌도 하려합니다...)

Name
Password
Homepage
Secret

티스토리 툴바