사이버 아이덴티티~ 파비콘(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"> 가 되겠죠?
자 그럼 이제 적용된 모습을 보시기만 하면 됩니다^^
간담히 제 파비콘을 설명하자면... 정보의 소통을 간략하게 표현한것입니다.
(쉽게말해서... 업로드/다운로드;;)
지금 이 블로그, 위니코리아, 위니쉐어, 쉐어코리아 모두 같은 파비콘을 채용하고 있습니다^^
익스플로러 마크의 아이콘을 만나는것이 대부분 입니다.
이런 투박한 아이콘 말이죠...
그런데 웹 브라우저를 익스플로러 7 이상이나 파이어폭스, 그리고 기타 프로그램을 사용하시는 분들은
특정 사이트에서 이 익스플로러 마크의 아이콘이 나타나야 할 부분에
전혀 다른 아이콘이 나오는 경우가 있을겁니다.
(익스플로러6는 지원이 되기는 하지만 버그때문에 안나옵니다-_-)
제 즐겨찾기 입니다 -_-;
파비콘이 설정된 즐겨찾기 같은 경우에는 아무래도 한눈에 들어오기 마련입니다.
파이어폭스 탭 입니다.
요즘 기업 쪽에서는 자신들의 기업 로고를 파비콘으로 채용하고 있는 경우도 있습니다.
(저기 국민은행 같은 경우 말이죠...)
남들과는 조금이라도 더 다르게...
개성의 시대... 사이버 아이덴티티라는 코드와 더불어 파비콘이 확산되가고 있습니다.
이렇게 다른사람 방명록에 글을 남길때도 작동되고... | 자신의 블로그에서도 작동합니다. |
자 그럼 파비콘(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"> 가 되겠죠?
자 그럼 이제 적용된 모습을 보시기만 하면 됩니다^^
제 파비콘 입니다.
간담히 제 파비콘을 설명하자면... 정보의 소통을 간략하게 표현한것입니다.
(쉽게말해서... 업로드/다운로드;;)
지금 이 블로그, 위니코리아, 위니쉐어, 쉐어코리아 모두 같은 파비콘을 채용하고 있습니다^^
'컴퓨터생활' 카테고리의 다른 글
| kaic@memorialog 오픈... (0) | 2007/02/21 |
|---|---|
| 구글이 좀 느려지지 않았나요? (2) | 2007/02/06 |
| 사이버 아이덴티티~ 파비콘(Favicon)을 만들어보자! (8) | 2007/02/06 |
| Cafe24 불안불안 하네... (2) | 2007/01/29 |
| 아직도 Gmail.com쓰세요? 이제 바꿔봐요! (0) | 2007/01/25 |
| 블로그 살려냈음... (0) | 2007/01/24 |
Trackback Address :: http://kaicnet.net/trackback/27
-
손쉽게 파비콘( favicon.ico )을 만들어 봅시다.
파비콘(favicon)은 웹서핑 중에 자주 보셨을 텐데요.. 아래 이미지와 같이 주소표시줄 앞에 나타나는 작은 아이콘을 지칭합니다. 파비콘이 적용된 주소표시줄파비콘은 즐겨찾기와 URL표시줄에 작은(16X16) 사이즈의 아이콘으로 사이트의 로고를 나타내는 기능을 하며마이크로소프트 Internet Explorer 5.0 부터 추가되어 현재 대부분의 브라우저에서 이 기능을 지원하고 있습니다. 사이트에 파비콘을 넣는 방법은 간단하지만, 아이콘(ico)파일...
